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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4027 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近用 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>

之所以要这么做，是为了实现在侧边栏展开的时候，页面主体部分是不能滚动的。

div

滚动

8 条回复 • 1970-01-01 08:00:00 +08:00

clww

2013-11-14 21:35:30 +08:00

absolute -> fix ?

honk

2013-11-14 21:39:27 +08:00 via Android

试试 iScroll 吧

scarlex

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

2013-11-15 12:47:16 +08:00

如果有使用css3, 尝试排除它们.
例如: box-shadow+border-radius

scarlex

2013-11-15 17:06:23 +08:00

@emric
不过我的网站只有搜索表单用过 box-shadow 和 border-radius 诶。影响会很大？
顺便说下，我试着把 overflow-y: hidden 和 overflow-y: auto 去掉之后手机端滚动变得比较流畅。
不过失去了一个 feature 。

我不太清楚 overflow 会对移动端的性能有多大影响.....orz

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

2013-11-15 22:41:00 +08:00

@emric
我刚才测试了一下，安卓方面基本没啥问题，基本可以一滚到底。
ios方面，4s 滚动起来比较流畅，iphone5 + ipad mini + itouch 滚动起来就是一卡一卡的。
wp方面，wp7.8也是一卡一卡的，wp8+滚动起来也很流畅。

我迟一点试一下把 box-shadow 和 border-radius 去掉看看怎么效果怎么样。

scarlex

2013-11-18 17:29:37 +08:00

我给个解决方法，
如果你在文档中使用了 overflow: hidden/auto; 的话，添加下面的 css 可以使滚动更加流畅。
html, body { -webkit-overflow-scrolling: touch; }