Überprüfen Sie, ob scrolled vorbei div mit JavaScript (keine jQuery)

Question

Ich lerne derzeit JavaScript und alle Lösungen, die ich über die jQuery-Bibliothek gefunden habe. Gibt es einen Weg dies zu tun, nur mit reinem JavaScript?

Die Idee ist, etwas zu haben, wie:

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

Answer 1

Hören Sie auf das scroll Ereignis. Um die aktuelle Bildlaufposition zu finden, können Sie die Methode scollY aufrufen.

Um die Y-Koordinate des oberen Teils eines Elements zu erhalten, können Sie die offsetTop des Elements verwenden. Da das Element eine Höhe hat, möchten wir die Höhe zu unserer Berechnung hinzufügen.

Das ist es.

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

Mit https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop können Sie die Y-Koordinate eines Elements erhalten.

Mit https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY können Sie die aktuelle Y-Koordinate der Bildlaufleiste abrufen.

Mit https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight erhalten Sie die Höhe eines Elements.

Es bleibt also nur noch zu überprüfen, ob scrollY> (offsetHeight + offsetTop) ist. Wenn dies der Fall ist, haben Sie das Element mit dem Bildlauf übergeben.

ich Ihnen überlassen, die Umsetzung, als eine Praxis Javascript zu lernen;)

Answer 3

Sie sollten in der Lage folgenden zu verwenden:

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