问题
最近做了一个动态加载的列表，在页面滑到底部的时候，加载新一页的数据。所以添加了一个scroll事件的监听。然后在手机上打开页面的时候就发现，页面滑动变慢了，就是手指从屏幕上移开之后，页面就停止滑动了，正常是会继续再滑动一点儿。
方法
一开始以为要优化scroll事件中获取数据的方法所执行的次数。但这种情况下，只有在滑到底部的时候才会触发获取数据的方法，所以这个优化方法不对症。
另外，在Android系统中打开页面的时候，滑动是很顺畅的。
后来看到好几个地方都指明了一种方法，试了一下竟然真的可行。就是给监听滑动事件的元素添加一个样式：
-webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。它有两个值：
- auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
- touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
参考阅读：
- -webkit-overflow-scrolling： https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling
- 高性能滚动 scroll 及页面渲染优化： http://web.jobbole.com/86158/
网友评论