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

Question

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

我有以下屏幕：

在中间，有一个div，在-webkit-overflow: auto;上设置，以便在此div内平滑滚动。滚动工作非常精细和流畅。

但只有在我对此div之外的其他元素执行touchmove之前。如果我这样做并尝试再次滚动滚动容器，它就会冻结而根本不会移动。在滚动容器上点击几次后，它再次滚动。 它正在丢失滚动容器的滚动焦点并尝试滚动父节点。

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

这看起来像这样：

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

我做了一个简短的例子，所以你可以看一下你的iphone / phone here。

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

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

Answer 1

iOS Safari浏览器永远不会让您完全控制滚动。 然而，有一个＆＃34; hack＆＃34;你可以使用，它需要JS tho：

• 在position: fixed
上设置body,html
• 发生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

Answer 2

我也有这个问题，我的网站在Android手机上运行良好，但在ios上，我不得不点击几次，激活滚动。

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

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

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

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

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

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