-webkit-overflow:touch; 点击滚动容器外部的元素时停止工作

Question

我在iPhone上有一个非常大的错误,它使页面无法使用,我无法解决它.我也找不到关于这个问题的任何话题.

我有以下屏幕:

在中间,有一个div,它被设置-webkit-overflow: auto;为在这个div内平滑滚动.滚动工作非常精细和流畅.

但是直到我touchmove在这个div之外的另一个元素上做一个.如果我这样做并尝试再次滚动滚动容器,它就会冻结而根本不会移动.在滚动容器上点击几次后,它再次滚动.它正在丢失滚动容器的滚动焦点并尝试滚动父级.

所以,如果我做这样的运动:

这看起来像这样:

注意:我只是从底部容器移动到溢出div中.释放手指然后再次尝试滚动后,它仍会滚动父div.

我做了一个简短的例子,所以你可以在这里看一下你的iphone /手机.

此问题仅在使用-webkit-overflow: auto正常时出现,overflow: scroll它始终有效但是...您知道这种滚动感觉有多么迟钝.

当您点击/点击容器时,有没有办法强制滚动焦点在所需的容器中-overflow-scrolling: touch;？

Answer 1

iOS Safari浏览器从未真正让您完全控制滚动.但是你可以使用"hack",它需要JS tho:

CSS

body, html {
  margin: 0;
  position: fixed;
}

JS

document.addEventListener('touchmove',function (){
  document.body.scrollTop = 0
})

顺便说一句,处理这个问题的一个更好的方法是修改标题/控件并为滚动容器添加填充.这不需要任何JS. 试试吧

Answer 2

我也遇到了这个问题，我的网站在 Android 手机上运行良好，但在 ios 上，我必须点击几次才能激活滚动。

我尝试禁用身体滚动，甚至尝试过这个

-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */

我必须使用自定义滚动条插件mCustomScrollbar

该插件完全覆盖系统滚动。这里javascript控制滚动内容的定位。它生成内容position:relative并用于top滚动内容。

如果此插件不适合您，您可以尝试任何其他滚动插件。它们的工作方式都是一样的。