javascript – Edge janky中的异步滚动(APZ)和有问题的;不在IE或其他浏览器中

2019年7月28日 171次阅读

边缘浏览器在滚动侦听器调整某些div时会导致janking.在IE,Chrome,Opera或Firefox中不会发生这种混乱.

即使Firefox不会导致janking,它会在检测到首次使用滚动侦听器时在控制台中引发一个标志,并指示我进入此页面进行说明：

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.

它只提供两种解决方案,其中第一种(位置：粘性)仅具有有限的浏览器支持,而第二种(滚动捕捉)已从Web标准中删除.

进一步深入,我在其开发团队中发现了一篇关于Edge的APZ(Asynchronous Panning& Zooming)的好文章：

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

如果有办法打开和关闭APZ,那将是理想的,但我无法找到解决方法.但是Firefox已经实现了它对我的例程没有任何问题,但Edge的实现非常有问题,特别是因为它不提供对position的支持：sticky.

还有另一种解决这个问题的方法吗？这是一个问题.

最佳答案 你可以通过将可滚动元素包装在另一个内部来强制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>

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

点赞