異步滾動（APZ）在邊緣janky＆有問題的;不在IE或其他瀏覽器中

Question

Edge瀏覽器在滾動偵聽器調整某些div時導致某些div被屏蔽。在IE，Chrome，Opera或Firefox中不會出現這種情況。

即使Firefox不引起janking，它提出在控制檯的標誌，當它檢測滾動監聽器第一次使用，並將其引導我到這個頁面解釋：

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

的本文介紹了似乎是我與邊緣有問題的確切應將描述：

在異步模式滾動，視覺滾動位置 在合成器線程更新，到U可見SER在 滾動事件之前在DOM中更新並且在主線程上觸發。這個 意味着所實現的效果將落後於用戶看到滾動位置的那一點。這可能會導致 的影響變得遲鈍，嚴重或緊張 - 總之，我們想要避免的事情。

它只提供了兩種解決方案，第一種解決方案（位置：粘性）僅支持有限的瀏覽器，第二種解決方案（捲動捕捉）已從Web標準中刪除。

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

如果有打開APZ在某種程度上，這將是理想和：

進一步晚晴，我通過它的開發團隊發現在邊緣上APZ（異步平移&縮放）好文章關閉，但我找不到解決辦法。然而，Firefox已經實現了，它對我的​​例程沒有任何問題，但Edge的實現是非常有問題的，特別是因爲它不支持position：sticky。

是否有解決此問題的另一種方法？這是一個問題。

Answer 1

您可以強制邊緣通過將可滾動元素包裝到另一個元素中，強制該包裝元素進入它自己的層，然後最後在該包裝中添加另一個虛擬位置固定元素來關閉它的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> 

這應該可以解決您的問題。