Identifying the completion of scrolling within a container

Question

Identifying the completion of scrolling within a container

I'm facing a challenge with my dynamic website that has numerous blog posts. My goal is to initially load only four posts and then add another four as the user scrolls to the end of the page. While I have figured out how to handle this on the backend, I am encountering issues on the frontend. Setting the height of html and body to 100% prevents scroll events on the window from working properly. To work around this, I decided to use a single div element to detect scrolling. Adding a scroll event listener to the div worked well, but I ran into trouble when trying to determine if the end of the scroll had been reached. The code I used was:

if (element.scrollHeight - element.scrollTop === element.clientHeight){
   alert("End");
}

How can I ensure that the alert only appears once the div has been scrolled to the end, rather than at the beginning of the page load?

javascript html css ajax

Answer 1

Answer №1

To detect the end of a scroll, you can utilize the following code:

element.scrollTop + element.offsetHeight>= element.scrollHeight

.

Update: Additionally, you can include a condition to prevent firing when scrolling upwards. For more information on detecting upward scroll conditions, refer to this link.

const element = document.getElementById('element');
let lastScrollTop = 0;
element.onscroll = (e)=>{
if (element.scrollTop < lastScrollTop){
      // upscroll 
      return;
   } 
   lastScrollTop = element.scrollTop <= 0 ? 0 : element.scrollTop;
    if (element.scrollTop + element.offsetHeight>= element.scrollHeight ){
       console.log("End");
    }
}

#element{
  background:red;
  max-height:300px;
  overflow:scroll;
}
.item{
height:100px;
}

<div id="element">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>

Answer 2

To detect the end of a scroll, you can utilize the following code:

element.scrollTop + element.offsetHeight>= element.scrollHeight

.

Update: Additionally, you can include a condition to prevent firing when scrolling upwards. For more information on detecting upward scroll conditions, refer to this link.

const element = document.getElementById('element');
let lastScrollTop = 0;
element.onscroll = (e)=>{
if (element.scrollTop < lastScrollTop){
      // upscroll 
      return;
   } 
   lastScrollTop = element.scrollTop <= 0 ? 0 : element.scrollTop;
    if (element.scrollTop + element.offsetHeight>= element.scrollHeight ){
       console.log("End");
    }
}

#element{
  background:red;
  max-height:300px;
  overflow:scroll;
}
.item{
height:100px;
}

<div id="element">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>

Answer 3

Answer №2

Solution for the upcoming year 2023.
Exciting news! We now introduce the new scrollend event.
Successfully tested on chromium 108 and firefox 109 browsers.

Check out this example:

const result = document.querySelector("p#result");

document.addEventListener("scrollend", (event) => {
  result.innerHTML = `The Document scrollend event has been triggered!`;
});

Based on information from mdn documentation:
The scrollend event is activated once the document finish its scrolling process.
Scrolling is considered finished when there are no pending updates to the scroll position and
the user has completed their interaction.

Learn more about it on mdn: Document: scrollend event

Answer 4

Solution for the upcoming year 2023.
Exciting news! We now introduce the new scrollend event.
Successfully tested on chromium 108 and firefox 109 browsers.

Check out this example:

const result = document.querySelector("p#result");

document.addEventListener("scrollend", (event) => {
  result.innerHTML = `The Document scrollend event has been triggered!`;
});

Based on information from mdn documentation:
The scrollend event is activated once the document finish its scrolling process.
Scrolling is considered finished when there are no pending updates to the scroll position and
the user has completed their interaction.

Learn more about it on mdn: Document: scrollend event

Answer 5

Answer №3

if (element.scrollTop + element.offsetHeight >= element.scrollTopMax) {
    // This is the condition I often rely on
}

This code snippet serves as a crucial checkpoint for my application.

Answer 6

if (element.scrollTop + element.offsetHeight >= element.scrollTopMax) {
    // This is the condition I often rely on
}

This code snippet serves as a crucial checkpoint for my application.

Identifying the completion of scrolling within a container

Answer №1

Answer №2

Answer №3

Similar questions

Issues with jQuery dataTable causing JavaScript type "GET" to not reach the controller

Embed the json data within the modal box

Guide to utilizing variables with Pattern.compile in Java for selenium RC

What is the method for designing a relative layout that organizes elements horizontally?

When attempting to implement sound on hover with an <a attribute containing an image>, the functionality is not functioning as expected

Retrieve the values of the recently selected options in a multiple selection

Which method is more effective: utilizing AJAX to retrieve page elements, or just toggling their visibility?

Sequence of loading unique CSS skin for MediaWiki

Retrieve the initial identification number from a sorted list using Jquery UI Sortable

Trouble with uploading images to folder using PHP and AJAX is causing confusion

ES6: Using DataURI to provide input results in undefined output

Maintain the values of radio buttons, dropdowns, and checkboxes using Javascript

What is the method for setting a default value for a disabled input?

Place text in the center of a div and add a numbered circle beside it

Manage an error request with unique parameters

Why isn't the pipe working when trying to extract the last 2 characters using

Preventing the copying and pasting of HTML ruby tags

Steps to load a script when the document is ready:

Exploring ways to retrieve items from a JSON array in Node.js, ideally avoiding traditional iteration methods

Converting objects to arrays in reactJS