ios下使用-webkit-overflow-scrolling:touch带来的bug

Question

在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素，随着页面一起滚动，只有滚动停止时才会恢复原位。如果不用这个属性的话，使用overflow-y:属性的盒子滑动非常不流畅，求大神帮忙

Answer 1

使用overflow-y属性的元素不应该和固定元素在一个层级，使用overflow-y属性的元素外面加一层和固定元素在同一层级可以解决该问题……

Answer 2

我想是由于UIWebView造成的。

之前做过一个项目 使用 weX5 在页面内绘制表格，在Android下 表头可以随着列正常滚动，这里表头使用了定位，但是在IOS下，表头会出现题主的问题，卡住不动，滚动结束才恢复位置。

所以我去读了源码，没有发现任何问题，这也让我困扰了很久，到处查资料，最后也无功而返，问题搁置了一段时间。

后来这个项目发现在IOS下 用户体验度不高，就去找优化方案。当时恰好IOS9刚刚更新不久，Cordova也刚刚加入了新插件，WKWebView，后来去查UIWebView和WKWebView的区别,在这个问题上，我想最重要的就是这一点：

官方宣称的高达60fps的滚动刷新率以及内置手势

后来又找到一篇文章，这让我下定决心换掉了这个坑爹的内核
链接如下：iOS 与 惯性滚动

最后完美的解决了滚动和APP卡顿的问题。

希望能帮助更多人解决问题
萌新一枚，求大神勿喷

Answer 3

可以参考一下这个，我也遇到类似问题，这个作者的总结还算完整https://www.cnblogs.com/xiahj...

Answer 4

加z-index了吗

Answer 5

.panel {
width: 100%;
display: none;
padding-top: 0px;
overflow-x: hidden;
/ overflow-y: auto; /
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}

我也遇到了 结果是 overflow-y: auto; 和 -webkit-overflow-scrolling: touch; 冲突了 出现了 两个滚动条 把 overflow-y: auto; 注释就好了

Answer 6

-webkit-overflow-scrolling:touch的其他坑
除此之外，这个属性还有很多bug，包括且不限于以下几种：
滚动中 scrollTop 属性不会变化
手势可穿过其他元素触发元素滚动
滚动时暂停其他 transition

https://www.cnblogs.com/xiahj...

Answer 7

设置你需要滚动的div的position: relative; -webkit-overflow-scrolling: touch;
亲测可以，我这边是做个移动端的聊天页面，上中下布局的，中间是对话内容，然后这样设置就解决了iOS滑动卡顿的问题。

Answer 8

谁能解答下，我也遇到了这个问题，被虐的不要不要的