javascript - Edge 中的异步滚动 (APZ) 卡顿且有问题；不在 IE 或其他浏览器中

Question

Edge 浏览器在滚动监听器调整某些 div 时会导致卡顿。这种卡顿不会发生在 IE、Chrome、Opera 或 Firefox 中。

即使 Firefox 不会导致卡顿，当它检测到首次使用滚动监听器时，它会在控制台中引发一个标志，并将我定向到此页面进行解释:

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

这篇文章似乎准确描述了我在使用 Edge 时遇到的问题:

In the asynchronous scrolling model, the visual scroll position is updated in the compositor thread and is visible to the user before the scroll event is updated in the DOM and fired on the main thread. This means that the effects implemented will lag a little bit behind what the user sees the scroll position to be. This can cause the effect to be laggy, janky, or jittery — in short, something we want to avoid.

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

更进一步，我发现了Edge开发团队关于APZ(Asynchronous Panning & Zooming)的一篇好文章:

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

如果有一种方法可以打开和关闭 APZ，那将是理想的，但我找不到绕过它的方法。然而 Firefox 已经实现了它对我的例程没有问题，但是 Edge 的实现是非常有问题的，特别是因为它不支持 position: sticky。

这个问题还有别的办法吗？这是一个问题。

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>

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