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>

Answer 2

使用https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop，您可以获得元素的Y坐标。

使用https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY，您可以获得滚动的当前Y坐标。

使用https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight，您可以获得元素的高度。

因此，唯一需要做的就是检查是否滚动＆gt; （offsetHeight + offsetTop）。如果是这样，则使用滚动传递元素。

我留给你实现，作为学习Javascript的练习;）

Answer 3

您应该可以使用以下内容：

if(window.scrollY >(element.offsetHeight + element.offsetTop)){
    // do something 
}

Answer 4

if (element.getBoundingClientRect().y < 0) {
  // do something
}

检查是否使用JavaScript滚动过div（没有jQuery）

4 个答案: