How to Detect the End of Scroll in a Scrollable Div with jQuery?

Detecting End of Scroll in a Scrollable Div with jQuery

When working with dynamic content, you may encounter the need to load more content as the user scrolls to the bottom of a container element. jQuery provides a convenient way to detect this event for divs with scrolling enabled.

To determine when the user has reached the bottom of a div, you can compare the sum of the element's scrollTop and innerHeight to its scrollHeight:

<code class="javascript">if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
  // End of scroll reached
}</code>

Code Implementation:

<code class="javascript">jQuery(function($) {
  $('#flux').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      alert('End of div reached');
    }
  })
});</code>

Explanation:

• scrollTop returns the number of pixels the element has been scrolled vertically.
• innerHeight retrieves the element's inner height, excluding scrollbars.
• scrollWidth represents the total height of the element's content, including areas outside the viewport.

When the sum of the scrollTop and innerHeight equals the scrollHeight, it indicates that the user has scrolled to the very bottom of the div.

Additional Note:

In earlier versions of jQuery, bind() was used to attach event handlers. However, as per the documentation, on() is the preferred method as of jQuery 1.7.

The above is the detailed content of How to Detect the End of Scroll in a Scrollable Div with jQuery?. For more information, please follow other related articles on the PHP Chinese website!