jQuery alert when scroll position equals divs content height

Question

I want the alert message to show when the scroll position of the div equals the height of the content inside the div. I have written some jQuery and believe I am very close to being able to do this.

However something is missing. Ignore the scroller div it will be 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 is here
    </div>
  </div>
</div>

Here's the CodePen Link.

If I understand that correctly you want to trigger some function if the scroll position is at the end of the content? — empiric, Apr 07 '17 at 15:28
Yes the end result will trigger a scroll animation to the next section — Reece, Apr 07 '17 at 15:32
You need to add a `scroll` event-handler to your code, yours currently will only be executed once the page has loaded: [example](https://jsfiddle.net/s1cj9s9v/) — empiric, Apr 07 '17 at 15:35

AP. · Accepted Answer · 2017-04-07T15:40:52.210

1

You need to do the following to detect this:

var container = $("#box1")                      //Fetch the container element once, so we don't squander performance on re-fetches
var box1_height = container.height();           //Get the visible height of the container (not the actual height with scroll)
var scroll_height = container[0].scrollHeight;  //Get the content height of the container
var scroll_pos = container.scrollTop();         //Get the top location of the scrollbar in that container
if(scroll_height == box1_height + scroll_pos){  //Check if we're exactly at the bottom
    alert("It's working");
}

Explanation:

This is because you know the top value of the scrollbar, but to detect if you're at the bottom of the container, you actually need to know the bottom value of the scrollbar. That is achieved by:

scroll_height == box1_height + scroll_pos

edited Apr 07 '17 at 15:40

answered Apr 07 '17 at 15:31

AP.

8,082
2
24
33

Would it be too much for me to ask you to comment at the side of each piece of code explaining what it is saying exactly? I'm new to jQuery. Thanks – Reece Apr 07 '17 at 15:35
Sure thing mate! – AP. Apr 07 '17 at 15:37
Thats great thanks. Just one final question what do the brackets after container[0] do? – Reece Apr 07 '17 at 15:45
1

`container` is a jQuery object (*modified instance of an array*). When we de-index at `[0]`, we end up getting the raw html element. We can then access its `scrollHeight`. Another way to write that could be `container.prop('scrollHeight')` – AP. Apr 07 '17 at 15:48

jQuery alert when scroll position equals divs content height

1 Answers1

Explanation: