问题
最近做了一个动态加载的列表,在页面滑到底部的时候,加载新一页的数据。所以添加了一个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/