javascript - Chrome 上的 scrollIntoView() 漏洞

Question

我正在尝试实现可以​​从一个 div ID 滚动跳转到另一个 div ID 的效果。基本上我在 div-1 上向下滚动并触发滚动事件并跳转到 div-2 ，反之亦然。我能够在 Vanilla JS 中实现它。它在 Chrome 上闪烁，但在其他浏览器(除 grandpa IE 外)上运行流畅。任何人都知道可能是什么原因造成的，我可以获得什么解决方案或替代方案？

document.getElementById("scroll-div1").addEventListener("wheel", myFunction1);

function myFunction1() {
    document.getElementById("scroll-div1").addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    document.getElementById("scroll-div2").scrollIntoView();
  }
  else if (e.deltaY < 0) {
       window.scrollTo(0,0);
  }
});
} 

document.getElementById("scroll-div2").addEventListener("wheel", myFunction2);

function myFunction2() {
        document.getElementById("scroll-div2").addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    document.getElementById("scroll-div3").scrollIntoView();
  }
  else if (e.deltaY < 0) {
       window.scrollTo(0,0);
  }
});
} 

document.getElementById("scroll-div3").addEventListener("wheel", myFunction3);

function myFunction3() {
        document.getElementById("scroll-div3").addEventListener('wheel', function(e) {
    if (e.deltaY < 0) {
       document.getElementById("scroll-div2").scrollIntoView();
  }
});
} 

<div id="scroll-div1" style="height: 768px; overflow: auto;">
<p>This is div 1</p>
</div>
<div id="scroll-div2" style="height: 768px">
<p>This is div 2</p>
</div>
<div id="scroll-div3" style="height: 768px">
<p>This is div 3</p>
</div>

Answer 1

所以我也尝试将 jQuery 与各种方法一起使用，似乎问题出在支持同步/异步滚动的浏览器上。在这种情况下，Chrome 似乎具有异步 滚动，这滞后于滚动回调。所以目前，在 2018 年 9 月，我无法提供我正在寻找的特定效果，并等待 future 的一些改进。

引用:https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects