javascript - 如何判断滚动时是否传递了某个元素？

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

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

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