css - -webkit-溢出：触摸；点击滚动容器外的元素时停止工作

Question

我在 iphone 上有一个非常大的错误，它使页面无法使用，我无法解决它。我也找不到有关此问题的任何主题。

我有以下屏幕：

中间有一个div，设置-webkit-overflow: auto;为在这个div里面平滑滚动。滚动工作非常顺畅。

但只有在我touchmove对这个 div 之外的另一个元素执行 a 之前。如果我这样做并尝试再次滚动滚动容器，它会被冻结并且根本不会移动。在我点击滚动容器几次后，它再次滚动。它正在失去滚动容器的滚动焦点并试图滚动父级。

所以，如果我做这样的运动：

这看起来像这样：

注意：我只是从底部容器到溢出 div 进行一次触摸移动。松开手指然后尝试再次滚动后，它仍然滚动父 div。

我做了一个简短的例子，所以你可以在这里用你的 iphone/phone 看看。

-webkit-overflow: auto此问题仅在使用正常时才会出现，overflow: scroll它始终可以正常工作，但是是的……您知道这种滚动感觉有多迟钝。

当您单击/点击容器时，有什么方法可以强制滚动焦点在所需容器中-overflow-scrolling: touch;？

Answer 1

iOS Safari 浏览器从未真正让您完全控制滚动。但是，您可以使用“hack”，它需要 JS：

• 开始position: fixed_body,html
• 一旦touchmove发生，设置body.scrollTop = 0 So 在您的情况下添加：

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滚动内容。

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