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

我目前在学习JavaScript以及我遇到的所有解决方案都使用jQuery库。有没有办法做到这一点，只使用纯JavaScript？检查是否通过JavaScript滚动过div（没有jQuery）

的想法是有这样的：

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

来源

2016-05-29 user3538161

我想你会在这里找到答案的http：// stackoverflow.com/questions/8070639/find-elements-position-in-browser-scroll在您的具体情况下，当底部为负数时，您已滚动通过 – JonSG

监听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>

来源

2016-05-29 18:58:34

请注意，元素坐标是左上角的坐标。不幸的是没有一个单一的属性给出绝对坐标。看看如何计算它 - > http://javascript.info/tutorial/coordinates#element-coordinates-by-offsetparent –

随着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你得到一个元素的高度。

所以唯一剩下要做的就是检查scrollY>（offsetHeight + offsetTop）。如果这是真的，你通过滚动传递元素。

我留给你的执行情况，作为一种实践学习JavaScript;）

来源

2016-05-29 19:00:09 dlopez

您应该能够使用以下命令：

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

来源

2017-05-19 11:09:23 Ozz

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

回答

相关问题