V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
scarlex
V2EX  ›  问与答

有哪些方面会导致**移动设备**浏览网页的时候滚动不流畅?

  •  
  •   scarlex · 2013-11-14 21:00:40 +08:00 · 4107 次点击
    这是一个创建于 4013 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近用 AngularJS 建了个站,桌面端还是好好的,到了移动端就开始悲剧鸟。
    根据测试人员说,ios 设备滚动的时候很卡。
    由于我手上没有 ios 设备,于是用 android 和 windows phone 测试了一下。
    android 还好,wp7.8 的 IE 滚动也比较卡。
    我很好奇有哪些因素会影响移动端滚动页面的流畅性?

    顺便说下,
    整体布局上面我大概用了这样的布局
    <div style="width: 100%;
    ------------height: 100%;
    ------------position: absolute;
    ------------overflow-y: hidden">

    ----<div style="width: 100%;
    ----------------height: 100%;
    ----------------position: absolute;
    ----------------overflow-y: auto">
    --------<ul>
    ------------<li></li>*n
    --------</ul>

    ----</div>

    </div>

    之所以要这么做,是为了实现在侧边栏展开的时候,页面主体部分是不能滚动的。
    8 条回复    1970-01-01 08:00:00 +08:00
    clww
        1
    clww  
       2013-11-14 21:35:30 +08:00
    absolute -> fix ?
    honk
        2
    honk  
       2013-11-14 21:39:27 +08:00 via Android
    试试 iScroll 吧
    scarlex
        3
    scarlex  
    OP
       2013-11-14 21:47:30 +08:00
    @clww
    是绝对定位的原因?
    话说我不太想用 fixed,根据 http://caniuse.com/#search=fix , ios 设备对 fixed 定位的支持还不太好。

    @honk
    ...我刚才在知乎上面看到iscroll的问题.. http://www.zhihu.com/question/21938954
    emric
        4
    emric  
       2013-11-15 12:47:16 +08:00
    如果有使用css3, 尝试排除它们.
    例如: box-shadow+border-radius
    scarlex
        5
    scarlex  
    OP
       2013-11-15 17:06:23 +08:00
    @emric
    不过我的网站只有搜索表单用过 box-shadow 和 border-radius 诶。 影响会很大?
    顺便说下,我试着把 overflow-y: hidden 和 overflow-y: auto 去掉之后手机端滚动变得比较流畅。
    不过失去了一个 feature 。

    我不太清楚 overflow 会对移动端的性能有多大影响.....orz
    emric
        6
    emric  
       2013-11-15 22:26:46 +08:00
    @scarlex
    overflow? 我有在用, 没有发现问题. 可能会在一些属性组合上面.
    box-shadow和border-radius在移动端挺糟糕,
    http://makandracards.com/makandra/17609-many-box-shadows-will-make-your-app-unusable-on-smartphones-and-tablets
    http://www.html5rocks.com/en/tutorials/speed/css-paint-times/
    scarlex
        7
    scarlex  
    OP
       2013-11-15 22:41:00 +08:00
    @emric
    我刚才测试了一下,安卓方面基本没啥问题,基本可以一滚到底。
    ios方面,4s 滚动起来比较流畅,iphone5 + ipad mini + itouch 滚动起来就是一卡一卡的。
    wp方面,wp7.8也是一卡一卡的,wp8+滚动起来也很流畅。

    我迟一点试一下把 box-shadow 和 border-radius 去掉看看怎么效果怎么样。
    scarlex
        8
    scarlex  
    OP
       2013-11-18 17:29:37 +08:00   ❤️ 1
    我给个解决方法,
    如果你在文档中使用了 overflow: hidden/auto; 的话,添加下面的 css 可以使滚动更加流畅。
    html, body { -webkit-overflow-scrolling: touch; }
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2581 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 05:59 · PVG 13:59 · LAX 21:59 · JFK 00:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.