Detect if scrolled to bottom

Question

How to detect if a div has scrolled to the bottom by using a button click function (not scroll arrow buttons)?

E.g.: So when $('#checkBottom'). is clicked, if $('#items') has scrolled to the bottom of the div it outputs the alert. And when $('#checkBottom'). is clicked, if $('#items') has not scrolled to the bottom of the div it dosen't output the alert.

Jq:

$('#checkBottom').on('click', function () {
    alert("yes, it has reached the bottom of the scroll");
});

scroll div structure example:

<div id="Wrapper">
    <div id="itemWrapper">
        <div id="items">
            <div class="content">
                <input type="image" src="http://img42.com/p1puE+" />
            </div>
            <div class="content">
                <input type="image" src="http://img42.com/p1puE+" />
            </div>
            <div class="content">
                <input type="image" src="http://img42.com/p1puE+" />
            </div>
        </div>
    </div>
</div>

What do you mean by _scrolled to the bottom of the div_? visible on the viewport or not? — lshettyl, Jun 05 '15 at 12:01
possible duplicate of http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport — Anonymous, Jun 05 '15 at 12:04

Samuli Hakoniemi · Accepted Answer · 2015-06-05T12:06:38.210

2

$('#checkBottom').on('click', function () {
  var wrapper = document.getElementById('Wrapper');
  if (wrapper.scrollTop + wrapper.offsetHeight >= wrapper.scrollHeight) {
    alert("yes, it has reached the bottom of the scroll");
  }
});

edited Jun 05 '15 at 12:06

answered Jun 05 '15 at 12:05

Samuli Hakoniemi

16,628
1
55
71

Detect if scrolled to bottom

1 Answers1