如何在禁用和重新启用滚动后停止 Webkit 本机滚动势头
How to stop Webkit native scroll momentum after disabling and re-enabling scroll
我对 Webkit 浏览器和一些自定义滚动行为有棘手的问题。
在我的页面上，我正在检测滚动，当它发生时，通过使 body 具有 overflow:hidden 来禁用滚动，然后为滚动位置执行一些自定义动画逻辑。
Webkit 浏览器 (Mac OS) 的问题是，当我重新启用滚动时，本机滚动似乎仍在缓和，因此将页面向初始滚动事件，在这种情况下是不可取的。
有没有办法disable/reset原生滚动或原生滚动动量？
这里 codepen 说明了这个问题。 然而 您需要将其下载为 zip 并 运行 在本地下载——无论 codepen 对预览容器所做的任何操作都会阻止导致问题的“本机”滚动。在本地查看并“向下”滚动时，您应该看到以下内容：
- Firefox（期望的行为）：对于滚动后的 25 帧，滚动位置不应移动，页面背景应为米色。仅当再次滚动 时，页面才应再次显示动画
- Webkit：滚动 25 帧后，当动画超时结束时，您会看到页面闪烁白色，并且 没有 重新滚动“旧”本机滚动缓动似乎仍然是“向下倾斜”，这会触发滚动事件，并立即再次将页面背景绘制为米色。我想避免在重新启用滚动后触发此“旧本机滚动”。
解决方案是使用与 body 不同的元素作为滚动包装器。显然，这种在将主体重新格式化为可滚动（有溢出）时“恢复”动量滚动的行为是硬编码的，而其他可滚动元素不会表现出这种不可预测的副作用。
我对 Webkit 浏览器和一些自定义滚动行为有棘手的问题。
在我的页面上，我正在检测滚动，当它发生时，通过使 body 具有 overflow:hidden 来禁用滚动，然后为滚动位置执行一些自定义动画逻辑。
Webkit 浏览器 (Mac OS) 的问题是，当我重新启用滚动时，本机滚动似乎仍在缓和，因此将页面向初始滚动事件，在这种情况下是不可取的。
有没有办法disable/reset原生滚动或原生滚动动量？
这里 codepen 说明了这个问题。 然而 您需要将其下载为 zip 并 运行 在本地下载——无论 codepen 对预览容器所做的任何操作都会阻止导致问题的“本机”滚动。在本地查看并“向下”滚动时，您应该看到以下内容：
- Firefox（期望的行为）：对于滚动后的 25 帧，滚动位置不应移动，页面背景应为米色。仅当再次滚动 时，页面才应再次显示动画
- Webkit：滚动 25 帧后，当动画超时结束时，您会看到页面闪烁白色，并且 没有 重新滚动“旧”本机滚动缓动似乎仍然是“向下倾斜”，这会触发滚动事件，并立即再次将页面背景绘制为米色。我想避免在重新启用滚动后触发此“旧本机滚动”。
解决方案是使用与 body 不同的元素作为滚动包装器。显然，这种在将主体重新格式化为可滚动（有溢出）时“恢复”动量滚动的行为是硬编码的，而其他可滚动元素不会表现出这种不可预测的副作用。