檢查是否通過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）

回答

相關問題