jQuery Check if Div Scrolled to End

Simple jQuery code snippet to check if you have scrolled to the end of a div and raise an event. Useful when you have an inline element (overflow:scroll) that you want to know if someones scrolled down to the bottom. Could be used to check if someone has read terms and conditions on a registration form.


$(document).ready(function(){
    $('div').bind('scroll',chk_scroll);
});
function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
    {
        console.log("bottom");
    }
}

Other ways:


//scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight
if( obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { }

Frequently Asked Questions (FAQs) about jQuery and Scrolling

How can I use jQuery to detect when a user has scrolled to the bottom of a div?

To detect when a user has scrolled to the bottom of a div using jQuery, you can use the scroll event in combination with the scrollTop and scrollHeight properties. The scroll event triggers whenever the user scrolls in the div. The scrollTop property returns the number of pixels that the content of an element is scrolled upward. The scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin. By comparing these two properties, you can determine when the user has scrolled to the bottom of the div.

What is the difference between scrollTop and scrollHeight in jQuery?

In jQuery, scrollTop and scrollHeight are two properties that provide information about an element’s scroll position and height. scrollTop returns the number of pixels that the content of an element is scrolled upward. It will return 0 if the element is not scrolled. scrollHeight, on the other hand, returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin. It includes the height of the content that is not visible on the screen due to overflow.

How can I use jQuery to check if a user has scrolled to the bottom of the page?

To check if a user has scrolled to the bottom of the page using jQuery, you can use the scroll event in combination with the scrollTop, scrollHeight and height properties. The scroll event triggers whenever the user scrolls on the page. The scrollTop property returns the number of pixels that the content of the page is scrolled upward. The scrollHeight property returns the entire height of the page in pixels. The height property returns the height of the viewport. By comparing these properties, you can determine when the user has scrolled to the bottom of the page.

Can I use jQuery to detect when a user starts scrolling?

Yes, you can use jQuery to detect when a user starts scrolling. You can do this by using the scroll event. The scroll event triggers whenever the user scrolls in the specified element. By using this event, you can run a function or execute some code when the user starts scrolling.

How can I use jQuery to detect the scroll direction?

To detect the scroll direction using jQuery, you can compare the current scroll position with the previous scroll position. If the current scroll position is greater than the previous scroll position, then the user is scrolling down. If the current scroll position is less than the previous scroll position, then the user is scrolling up. You can store the current scroll position in a variable and update it each time the scroll event triggers.

Can I use jQuery to prevent scrolling?

Yes, you can use jQuery to prevent scrolling. You can do this by using the event.preventDefault() method in the scroll event. This method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For the scroll event, the default action is scrolling, so using this method will prevent scrolling.

How can I use jQuery to animate scrolling?

You can use jQuery to animate scrolling by using the animate method in combination with the scrollTop property. The animate method performs a custom animation of a set of CSS properties. The scrollTop property sets or returns the number of pixels an element’s content is scrolled vertically. By using these together, you can animate the scrolling of an element.

Can I use jQuery to scroll to a specific element?

Yes, you can use jQuery to scroll to a specific element. You can do this by using the animate method in combination with the offset method. The animate method performs a custom animation of a set of CSS properties. The offset method returns the coordinates of the top-left corner of an element relative to the document. By using these together, you can animate the scrolling of the page to a specific element.

How can I use jQuery to scroll to the top of the page?

You can use jQuery to scroll to the top of the page by using the animate method in combination with the scrollTop property. The animate method performs a custom animation of a set of CSS properties. The scrollTop property sets or returns the number of pixels an element’s content is scrolled vertically. By setting the scrollTop property to 0 in the animate method, you can animate the scrolling of the page to the top.

Can I use jQuery to detect when a user stops scrolling?

Yes, you can use jQuery to detect when a user stops scrolling. You can do this by using the scroll event in combination with the setTimeout function. The scroll event triggers whenever the user scrolls in the specified element. The setTimeout function calls a function or evaluates an expression after a specified number of milliseconds. By using these together, you can run a function or execute some code when the user stops scrolling.