javascript - 检查是否使用 JavaScript(无 jQuery)滚动过 div

Question

我目前正在学习 JavaScript，我遇到的所有解决方案都使用 jQuery 库。有没有办法做到这一点，只使用纯 JavaScript？

这个想法是有类似的东西:

function passed(element) {if passed: do something}

Answer 1

监听 scroll 事件。要查找当前滚动位置，可以调用 scollY 方法。

要获取元素顶部的 Y 坐标，可以使用元素的 offsetTop。因为元素有高度，所以我们要将高度添加到我们的计算中。

就是这样。

window.addEventListener("scroll", function() {
  var elementTarget = document.getElementById("section-2");
  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
      alert("You've scrolled past the second div");
  }
});

.section-1 {
  height: 400px;
  width: 100%;
  background: green;
}

.section-3 {
  height: 400px;
  width: 100%;
  background: orange;
}

<div class="section-1"></div>
<div id="section-2">Scroll past this div</div>
<div class="section-3"></div>