Question

边缘浏览器会在滚动侦听器调整某些div时导致某些div被删除。 IE，Chrome，Opera或Firefox中不会出现这种情况。

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

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

这篇文章描述了我对Edge所遇到的问题的确切解释：

在异步滚动模型中，可视滚动位置为在合成器线程中更新，并且在用户可见之前 scroll事件在DOM中更新并在主线程上触发。这个意味着实施的效果将落后于后者用户看到滚动位置。这可能会导致效果迟钝，笨拙或紧张 - 简而言之，我们想要避免的事情。

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

进一步深入，我在开发团队发现了一篇关于Edge的APZ（Asynchronous Panning＆amp; 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>

这可以解决您的问题。

Edge janky＆amp; amp;中的异步滚动（APZ）有问题的;不在IE或其他浏览器中

1 个答案: