Question

我试图找出滚动时何时通过某些元素。

  const elementTarget = document.getElementById('sidebar');

  window.addEventListener('scroll', () => {
    if (window.scrollY > elementTarget.offscrollTop) {
      console.log('passed an element');
    }
  })

示例代码：https://codepen.io/RomanKomprs/pen/LMrPNJ

已编辑：上面的代码不起作用。当我向下滚动并且scrollY大于侧边栏元素的偏移量时，该条件不会触发。我在做什么错了？

Answer 1

将offscrollTop替换为getBoundingClientRect().top

const elementTarget = document.getElementById("sidebar");

window.addEventListener("scroll", () => {
  if (window.scrollY > elementTarget.getBoundingClientRect().top) {
    console.log("passed an element");
  }
});

Try it

Answer 2

首先，您必须具有相同ID的元素；其次，您需要使用.offsetTop来获取offset的值；

if (window.scrollY > elementTarget1.offsetTop) {
  console.log('passed an element');
}

codepen.io/anon/pen/LMrYMZ

如何确定滚动时是否传递了元素？

2 个答案: