Question posted in
You can find the official documentation here.

detect reaching to the bottom of a container on window scroll – Jquery ajax

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.

Tags:

2

Answers


  1. 0 
    if(obj.scrollTop === (obj.scrollHeight - obj.offsetHeight)) {}

    I think?

    Login or Signup to reply.
  2. 0

    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
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search