Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Check if a user has scrolled to the bottom [duplicate]

I'm making a pagination system (sort of like Facebook) where the content loads when the user scrolls to the bottom. I imagine the best way to do that is to find when the user is at the bottom of the page and run an Ajax query to load more posts.

The only problem is I don't know how to check if the user has scrolled to the bottom of the page. Any ideas?

I'm using jQuery, so feel free to provide answers that use it.

like image 919
Johnny Avatar asked Oct 09 '10 22:10

Johnny


People also ask

What is $( window scrollTop ()?

jQuery scrollTop() Method The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0.

How do I know if my scroll is ending?

To detect scroll end with JavaScript, we can listen to the scroll event. Then in the event listener, we check if offsetHeight + scrollTop is bigger than or equal to scrollHeight . We get the div with document. querySelector .

How do you check if an element is visible after scrolling?

To know whether the element is fully visible in viewport, you will need to check whether top >= 0, and bottom is less than the screen height. In a similar way you can also check for partial visibility, top is less than screen height and bottom >= 0. The Javascript code could be written as : window.


2 Answers

I'm not exactly sure why this has not been posted yet, but as per the documentation from MDN, the simplest way is by using native javascript properties:

element.scrollHeight - element.scrollTop === element.clientHeight 

Returns true when you're at the bottom of any scrollable element. So simply using javascript:

element.addEventListener('scroll', function(event) {     var element = event.target;     if (element.scrollHeight - element.scrollTop === element.clientHeight)     {         console.log('scrolled');     } }); 

scrollHeight have wide support in browsers, from ie 8 to be more precise, while clientHeight and scrollTop are both supported by everyone. Even ie 6. This should be cross browser safe.

like image 41
Félix Adriyel Gagnon-Grenier Avatar answered Sep 18 '22 17:09

Félix Adriyel Gagnon-Grenier


Use the .scroll() event on window, like this:

$(window).scroll(function() {    if($(window).scrollTop() + $(window).height() == $(document).height()) {        alert("bottom!");    } }); 

You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document). If you wanted to instead check if the user is near the bottom, it'd look something like this:

$(window).scroll(function() {    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {        alert("near bottom!");    } }); 

You can test that version here, just adjust that 100 to whatever pixel from the bottom you want to trigger on.

like image 112
Nick Craver Avatar answered Sep 17 '22 17:09

Nick Craver