2

我正在尝试实现可以​​从一个 div ID 滚动跳转到另一个 div ID 的效果。基本上我在div-1上向下滚动并触发滚动事件并跳转到div-2，反之亦然。我能够在 vanilla JS 中实现它。它在 Chrome 上闪烁，但在其他浏览器上运行流畅（除了爷爷 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>

4

1 回答 1

1

所以我也尝试通过各种方法使用 jQuery，似乎问题在于支持同步/异步滚动的浏览器。在这种情况下，Chrome 似乎有异步滚动，它滞后于滚动回调。所以现在，在 2018 年 9 月，我无法给出我一直在寻找的特定效果，并等待未来的一些改进。

参考：https ://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

于 2018-09-03T15:28:06.073 回答