移动端开发——关于局部区域滚动总结---实战系列

在移动端开发的时候经常会碰到区域滚动的需求，当然实现起来也是非常简单的，给需要滚动的元素定高然后添加一个overflow-y:scorll自然就可以滚动了，但是添加这个属性之后，使用chrome或者其他浏览器工具调试时是支正常的，但是到手机上时滚动效果就十分的奇怪，滚动会让人感觉有卡顿感。这个时候使用一个属性就可以解决这个问题。-webkit-overflow-scrolling:touch，这个属性会让滚动条产生回弹效果，让滚动没有那么生硬。

在MDN上是这么定义这个属性的：

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

然而是不是设置了这个属性之后就万事大吉了呢？也不全是这样子的，其实这个属性也还是有一些坑的。

偶尔会卡住或不能滑动

比较常见的问题有：

• 在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。
• 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。
• 通过动态添加内容撑开容器，结果根本不能滑动的bug。

在网上也能看到别人也遇到过同样的问题。

偶尔卡住的问题，解决方案网上众说纷纭，遇到了很多相同的说法，