MS 邊緣滾動延遲

Question

我有 2 個 div，每個都有一張桌子。 嘗試在底部 div 滾動時使它們保持同步。 我綁定了 onscroll 事件，當它觸發時，我會調整第一個表的位置。 在 ie11、chrome、firefox 中工作正常。 在 Edge 中，在 onscroll 事件觸發之前滾動時有很大的延遲，並且有明顯的延遲。 最終 2 個表的位置同步了，但在 onscroll 事件最終觸發之前，它看起來很糟糕半秒。 任何想法如何解決它？

https://jsfiddle.net/hoffm263/Lcxv3164/6/#&togetherjs=AVVaUkC93B

 $(document).ready(function() { $("#d1").on("scroll", function(e) { console.log(new Date()); //adjust h1 position $("#h1").scrollLeft($(e.target).scrollLeft()); }); });

 td { border: solid black 1px; word-wrap: break-word; word-break: break-all; white-space: normal; } table { border-collapse: collapse; table-layout: fixed; } tbody { display: block; } #h1 { width: 317px; overflow: hidden; } #d1 { height: 200px; overflow: auto; width: 317px; } #d1 table { width: 400px; } #h1 table { width: 417px; } #h1 td:nth-child(1) { width: 100px; background-color: #AAAAAA; } #h1 td:nth-child(2) { width: 50px; background-color: #CCCCCC; } #h1 td:nth-child(3) { width: 267px; background-color: #EEEEEE; } #d1 td:nth-child(1) { width: 100px; background-color: #AAAAAA; } #d1 td:nth-child(2) { width: 50px; background-color: #CCCCCC; } #d1 td:nth-child(3) { width: 250px; background-color: #EEEEEE; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="h1"> <table> <tr> <td>11111fasdfas</td> <td>2 222</td> <td>33333333</td> </tr> </table> </div> <div id="d1"> <table> <tr> <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td> <td>2222 sdaf dsd f222 222</td> <td>33333 da fsfd as333</td> </tr> <tr> <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td> <td>2222 sdaf dsd f222 222</td> <td>33333 da fsfd as333</td> </tr> <tr> <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td> <td>2222 sdaf dsd f222 222</td> <td>33333 da fsfd as333</td> </tr> <tr> <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td> <td>2222 sdaf dsd f222 222</td> <td>33333 da fsfd as333</td> </tr> <tr> <td>111asfasdfasdfafasdasdf11 adf adf a df 111</td> <td>2222 sdaf dsd f222 222</td> <td>33333 da fsfd as333</td> </tr> </table> </div>

Answer 1

這里的問題是您的事件偵聽器多次觸發。 這會導致瀏覽器延遲，因為您的代碼試圖在短時間內完成大量工作。 添加滾動事件時，您需要使用油門或去抖動功能 => https://www.npmjs.com/package/throttle-debounce