Check if scrolled past div with JavaScript (no jQuery)
You should be able to use the following:
if(window.scrollY >(element.offsetHeight + element.offsetTop)){
// do something
}
Listen for the scroll
event. To find the current scroll position, you can call the scollY
method.
To get the Y coordinate of the top of an element, you can use the element's offsetTop
. Because the element has a height, we want to add the height to our calculation.
That's it.
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>