html - 在（以前）动画列表上没有使用 MacBooks 触控板滚动

Question

我的问题：

在我的项目中，有一个动画容器（名为.uebersicht），它引入了一些带有可滚动列表的 div。动画在我的应用程序中的两个不同列表之间翻转（感谢 david walsh ）。因为它们都应该是可滚动的，所以我必须翻转并踢开翻转的容器。

我已经简化了我的标记和 CSS 并制作了一个小提琴 - 但小提琴工作正常：D（也许是一个很好的跟踪......）所以我把它放在托管服务上。

• 网站（滚动不起作用）： http: //fiddle.bplaced.net/52426221/
• fiddel（相同的代码，按预期工作）：https ://jsfiddle.net/58omteyL/5/

不过，为了更好地理解，我将我的问题可视化：

（如果您想知道不同的容器，它们对于应用程序的其余部分很重要）

我的方法在触摸和鼠标交互方面效果很好，但 Mac 触控板（就像 MacBook 中的触控板），也许（无法测试）Mac 上的魔法垫和魔法鼠标每 2/3/4 次滚动一次容器时间。

MacOS 10.13.6 下的 Safari 12.0 似乎试图滚动错误的容器（窗口元素）。

重现错误：

1. 用 MacBook/MagicPad/MagicMouse 查看小提琴
2. 将系统滚动方向设置为不自然
3. 指向黄色容器并向下滚动
4. 如果这可行（有时）移动并单击（在容器内部或外部）并重试

似乎容器中有一个区域无法滚动。

为什么这是一个 SO 问题：

您可能会争辩说这是一个 Safari 错误，对 SO 没有任何意义。但是当我使用来自 w3css 的动画（不幸的是没有翻转）时，滚动按预期工作。

---

来自评论的提示在这里

• 当 div 滚动到顶部并向上滚动时，焦点转到父级，您必须抬起手指才能向下滚动
• 我的触控板设置不自然（向下滑动 = 向下滚动）将这些设置更改为自然（向上滑动 = 向下滚动，这是标准的）使我的示例工作
• 当滚动被阻止时，您甚至无法使用 jsscrollTo滚动等。不会触发滚动事件

问题保持不变，因为我无法确保每个用户都将设置设置为自然而不是像我一样不自然。

标签： htmlcssmacossafari

Answer 1

我遇到了问题：MacBook Pro（15 英寸，2016 年）

Safari：版本 12.0 (14606.1.36.1.9)

我已经添加并overflow: hidden似乎HTML, BODY工作。这可能与滚动时锁定正文有关，但不确定。

如果您通过添加更新代码，我可以再次测试它

html,body {
   overflow:hidden
}