Question

我正在尝试实现一种效果，即可以从一个div ID滚动到另一个div ID。基本上，我在 div-1 上向下滚动并在滚动条上触发一个事件，然后跳转到 div-2 ，反之亦然。我能够在香草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>

Answer 1

因此，我尝试还将jQuery与各种方法配合使用，似乎问题出在支持同步/异步滚动的浏览器上。在这种情况下，Chrome似乎具有异步滚动，这滞后于滚动回调。因此，就目前而言，在2018年9月，我无法提供我一直期望的效果，并等待将来的改进。

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

在Chrome上的scrollIntoView（）错误

1 个答案: