html - How to fire javascript function after scroll to specific div bottom?

Question

 window.addEventListener("scroll", ()=>{
        alert('you passed red box bottom')
      })

.first-box{height:200px; 
width:300px;
border:1px solid red}

.second-box{
height:200px; 
width:300px;
border:1px solid blue
margin-top:140px;
}

<div class="first-box"></div>
<div class="second-box"></div>

question from:https://stackoverflow.com/questions/65876046/how-to-fire-javascript-function-after-scroll-to-specific-div-bottom

Answer 1

To reach the bottom of the container you want, you need to use parameter scrollHeight of that container. Further, using the condition if you compare the current position of window.scrollY until this position is equal to element.scrollHeight.

var firstbox = document.querySelector(".first-box");

window.addEventListener("scroll", () => {
  if (this.scrollY >= firstbox.scrollHeight) {
    console.log('you passed red box bottom');
  }
});

body {
  height: 5000px;
}

.first-box {
  height:200px; 
  width:300px;
  border:1px solid red;
}

.second-box {
  height:200px; 
  width:300px;
  border:1px solid blue
  margin-top:140px;
}

<div class="first-box"></div>
<div class="second-box"></div>