javascript - jQuery alert when scroll position equals divs content height -

this question has answer here:

• detecting when user scrolls bottom of div jquery 11 answers

i want alert message show when scroll position of div equals height of content inside div. have written jquery , believe close being able this.

however missing. ignore scroller div used later. thanks

$(document).ready(function() {      var box1_height = $("#box1").height();    var scroll_pos = $("#box1").scrolltop();      if (box1_height == scroll_pos) {      alert("it's working");    }  });

* {    margin: 0;    padding: 0;  }    body {    overflow: hidden;  }    #background_1 {    background-image: url("http://placehold.it/350x150");    background-repeat: no-repeat;    background-size: cover;    background-position: center;    position: relative;  }    .scroller {    width: 100%;    height: 100vh;    overflow: scroll;  }    .content {    width: 80%;    height: 80vh;    margin: 10vh auto;    background-color: rgba(0, 0, 0, 0.6);    overflow: scroll;    box-size: border-box;  }

<div id="background_1">    <div class="scroller">      <div id="box1" class="content">        content here      </div>    </div>  </div>

here's codepen link.

you need following detect this:

var container = $("#box1")                      //fetch container element once, don't squander performance on re-fetches var box1_height = container.height();           //get visible height of container (not actual height scroll) var scroll_height = container[0].scrollheight;  //get content height of container var scroll_pos = container.scrolltop();         //get top location of scrollbar in container if(scroll_height == box1_height + scroll_pos){  //check if we're @ bottom     alert("it's working"); } 

explanation:

this because know top value of scrollbar, detect if you're @ bottom of container, need know bottom value of scrollbar. achieved by:

scroll_height == box1_height + scroll_pos