detect reaching to the bottom of a container on window scroll

user_10666590 0
Viewed 346

I have an HTML page with a container of products in the middle of it. I want to call an ajax call to load more products when user reached the end of the container of the products using the window scroll. how can I detect if user has scrolled and reached the end of the product container? note: product container is NOT scrollable and It's NOT the end of the page. I have a footer after it.

html jquery ajax javascript
2 Answers

There are many ways you can do this. One of the simplest way is to get the distance of bottom of the container from the top of viewport/visible screen and the check if it is less than screen height. You can get all distances of all sides of container using element.getBoundingClientRect() .

Basically it returns these values as shown in the image below- values returned

You can read more about that here- https://www.digitalocean.com/community/tutorials/js-getboundingclientrect

Now your code should look like -

var rect=document.getElementById("container").getBoundingClientRect();
var bottom=rect.bottom;
if(bottom <= window.innerHeight){
   //reached the end. Load more stuff
}
user_131143540 
if(obj.scrollTop === (obj.scrollHeight - obj.offsetHeight)) {}

I think?

user_148561960
Related