我在 iphone 上有一个非常大的错误，导致页面无法使用，我无法解决它。我也找不到关于这个问题的任何话题。
我有以下屏幕:
中间有一个div，设置了-webkit-overflow: auto;，让div里面滚动流畅。滚动工作非常顺利。
但是 直到我在此 div 之外的另一个元素上执行 touchmove。如果我这样做并尝试再次滚动 scrollcontainer，它会被卡住并且根本不会移动。在滚动容器上轻敲几次后，它又开始滚动了。
它正在失去滚动容器的滚动焦点并试图滚动父级。
所以，如果我做这样的 Action :
这看起来像这样:
注意:我只是从底部容器到溢出 div 中进行了一次触摸移动。松开手指后再次尝试滚动，它仍然滚动父 div。
我做了一个简短的例子，所以你可以用你的iphone/phone看看here .
只有在使用 -webkit-overflow: auto 时才会出现此问题 对于正常的 overflow: scroll 它总是有效但是是的......你知道这种滚动感觉有多滞后。
当您使用 -overflow-scrolling: touch; 单击/点击容器时，是否有任何方法可以强制将滚动焦点置于所需的容器中？
最佳答案
iOS Safari 浏览器从未真正让您完全控制滚动。 但是，您可以使用“hack”，它需要 JS:
- 在
body,html上设置position: fixed - 一旦
touchmove发生，设置body.scrollTop = 0所以在你的情况下添加:
CSS
body, html {
margin: 0;
position: fixed;
}
JS
document.addEventListener('touchmove',function (){
document.body.scrollTop = 0
})
Example page for testing on device
顺便说一句，处理这个问题的更好方法是固定标题/控件并向滚动容器添加填充。这不需要任何 JS。 try it
关于css - -webkit-溢出 : touch; stops working when tapping on element outside of scroll container，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48873171/