Edge 中的异步滚动 (APZ) 出现卡顿和问题；不在 IE 或其他浏览器中

Question

当通过滚动侦听器调整某些 div 时，Edge 浏览器会导致某些 div 出现卡顿。这种卡顿现象不会在 IE、Chrome、Opera 或 Firefox 中发生。

\n\n

尽管 Firefox 不会导致卡顿，但当它检测到首次使用滚动侦听器时，它会在控制台中引发一个标志，并将我引导到此页面以进行说明：

\n\n

https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects

\n\n

该文章似乎准确描述了我在 Edge 中遇到的问题：

\n\n

\n

在异步滚动模型中，视觉滚动位置在合成器线程中更新，并且在滚动事件在 DOM 中更新并在主线程上触发之前对用户可见。这意味着实现的效果将稍微落后于用户看到的滚动位置。简而言之，这可能会导致效果迟缓、卡顿或紧张，这是我们想要避免的。

\n

\n\n

它只提供两种解决方案，第一种（位置：粘性）仅具有有限的浏览器支持，第二种（滚动捕捉）已从网络标准中删除。

\n\n

更进一步，我发现了 Edge 开发团队关于 APZ（异步平移和缩放）的一篇好文章：

\n\n

https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#ahrEuFu6fybJ1uwj.97

\n\n

如果有一种方法可以打开和关闭 APZ，那就太理想了，但我找不到解决方法。然而，Firefox 的实现对我的日常工作来说没有任何问题，但 Edge 的实现却存在极大的问题，特别是因为它不提供对position:sticky 的支持。

\n\n

还有其他方法可以解决这个问题吗？这是一个问题。

\n

Answer 1

您可以通过将可滚动元素包装在另一个元素内，强制该包装元素进入其自己的层，最后在该包装内添加另一个虚拟的位置固定元素，来强制 Edge 关闭其 APZ 实现。

你的 HTML 会像这样：

// Wrapper element, forced into it's own layer with translateZ.

<div id="wrapper_element" style="transform: translateZ(0);">

    // Dummy position fixed element to force APZ off.
    <div style="top: 0px; width: 1px; height: 1px; position: fixed; z-index: 1;"></div>

    // Your current scrollable element.
    <div id="your_scrollable_element">

         // Your content

    </div>

</div>

这应该可以解决你的问题。