如何在禁用和重新启用滚动后停止 Webkit 本机滚动势头

Question

我在使用 Webkit 浏览器和一些自定义滚动行为时遇到了棘手的问题。

在我的页面上，我正在检测滚动，当它发生时，通过使 body 具有 overflow:hidden 来禁用滚动，然后为滚动位置执行一些自定义动画逻辑。

Webkit 浏览器 (Mac OS) 上的问题是，当我重新启用滚动时，本机滚动似乎仍在缓和，因此将页面移动到初始滚动事件的方向，这在这种情况下是不可取的.

有没有办法禁用/重置原生滚动或原生滚动动量？

这是一个codepen 说明问题。 但是您需要将其下载为 zip 并在本地运行 - 无论 codepen 对预览容器做什么，都会阻止导致问题的“本机”滚动。在本地查看并“向下”滚动时，您应该看到的内容：

• Firefox（所需行为）：滚动后 25 帧，滚动位置不应移动，页面背景应为米色。只有在再次滚动时页面才会再次动画
• Webkit：滚动后 25 帧后，动画超时结束时您会看到页面闪烁白色，并且无需重新滚动“旧”本机滚动缓动似乎仍在“斜坡” down”，触发滚动事件，并立即将页面背景重新绘制成米色。我想避免在重新启用滚动后触发这种“旧的原生滚动”。

Answer 1

解决方案是使用与body 不同的元素作为滚动包装器。显然，在将主体重新格式化为可滚动（有溢出）时“恢复”动量滚动的行为是硬编码的，而其他可滚动元素不会表现出这种不可预测的副作用。