移动端的滚动事件会有各种坑，这里对移动端滚动事件中的坑进行了总结，同时提供了一些解决方案。首先我们通过
移动web之滚动篇了解一下移动端的滚动事件

移动端滚动的坑

1. ios 滚动不顺畅

在移动端上，在你用overflow-y:scorll属性的时候，你会发现滚动的效果很慢，这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。

MDN上是这样定义的：

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

2.-webkit-overflow-scrolling在safari下布局抖动

image

想实现一个布局为header、main、bottom的布局，其中头部和底部通过fixed固定，中间部分通过滚动条滑动。

如果目的是实现只要中间的内容超过屏幕高度时，中间内容会自动滚动的效果的话，main部分加上上下的padding，然后不需要自己添加任何滚动条属性，当超出高度时，body会自动产生滚动条。这样我们的目的其实是实现了的。

但是在safari上，当超出高度，页面往下滑时，浏览器底部的工具栏会随着页面一起晃动（向下滚动时会拉起底部工具栏），造成了很不好的体验。所以我们想在中间的main部分加一个独立的滚动条。

-webkit-overflow-scrolling:touch还有很多问题

(1)保证使用了该属性的元素上没有设置定位
(2)滚动中 scrollTop 属性不会变化
(3)添加动态内容页面不能滚动

详情参考深入研究-webkit-overflow-scrolling:touch及ios滚动

3. BetterScroll：最好用的移动端滚动插件，规避滚动可能产生的问题

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

为了满足这些功能，better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。同时还支持很多API和事件，具体支持的事件可以查看官网讲的非常详细。

【推荐阅读】
BetterScroll
BetterScroll移动端滚动场景的应用
BetterScroll：可能是目前最好用的移动端滚动插件