在移动端开发的时候经常会碰到区域滚动的需求,当然实现起来也是非常简单的,给需要滚动的元素定高然后添加一个overflow-y:scorll
自然就可以滚动了,但是添加这个属性之后,使用chrome或者其他浏览器工具调试时是支正常的,但是到手机上时滚动效果就十分的奇怪,滚动会让人感觉有卡顿感。这个时候使用一个属性就可以解决这个问题。-webkit-overflow-scrolling:touch
,这个属性会让滚动条产生回弹效果,让滚动没有那么生硬。
在MDN上是这么定义这个属性的:
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
然而是不是设置了这个属性之后就万事大吉了呢?也不全是这样子的,其实这个属性也还是有一些坑的。
偶尔会卡住或不能滑动
比较常见的问题有:
- 在safari上,使用了-webkit-overflow-scrolling:touch之后,页面偶尔会卡住不动。
- 在safari上,点击其他区域,再在滚动区域滑动,滚动条无法滚动的bug。
- 通过动态添加内容撑开容器,结果根本不能滑动的bug。
在网上也能看到别人也遇到过同样的问题。
偶尔卡住的问题,解决方案网上众说纷纭,遇到了很多相同的说法,