移动网页在IOS上滑动变慢不顺畅

2017-11-23 本文已影响349人 Evelynzzz

问题
最近做了一个动态加载的列表，在页面滑到底部的时候，加载新一页的数据。所以添加了一个scroll事件的监听。然后在手机上打开页面的时候就发现，页面滑动变慢了，就是手指从屏幕上移开之后，页面就停止滑动了，正常是会继续再滑动一点儿。

方法
一开始以为要优化scroll事件中获取数据的方法所执行的次数。但这种情况下，只有在滑到底部的时候才会触发获取数据的方法，所以这个优化方法不对症。

另外，在Android系统中打开页面的时候，滑动是很顺畅的。

后来看到好几个地方都指明了一种方法，试了一下竟然真的可行。就是给监听滑动事件的元素添加一个样式：

-webkit-overflow-scrolling: touch;

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。它有两个值：

auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

参考阅读：