onScrollBottom

What is onScrollBottom?#

onScrollBottom is an event that fires when the user scrolls to the bottom of a web page or element.

How to detect onScrollBottom?#

To detect onScrollBottom, we can use JavaScript and add an event listener to the window or element.

window.addEventListener('scroll', function() {
  if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
    // User has scrolled to the bottom
    console.log('onScrollBottom');
  }
});

The code above listens for the 'scroll' event on the window and checks if the sum of the current visible area and the current scroll position is greater than or equal to the total height of the body. If it is, then the user has scrolled to the bottom and 'onScrollBottom' is logged to the console.

We can also use jQuery to detect onScrollBottom:

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
    // User has scrolled to the bottom
    console.log('onScrollBottom');
  }
});

The code above listens for the 'scroll' event on the window and checks if the sum of the current scroll position and the window height equals the total height of the document. If it does, then the user has scrolled to the bottom and 'onScrollBottom' is logged to the console.

What can we do with onScrollBottom?#

With onScrollBottom, we can load more content dynamically as the user scrolls down the page. This technique is called infinite scrolling and is commonly used in social media and e-commerce websites.

var page = 1;

window.addEventListener('scroll', function() {
  if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
    // User has scrolled to the bottom
    page++;
    loadMoreContent(page);
  }
});

function loadMoreContent(page) {
  // Make an AJAX request to load more content
  // Append the new content to the page
}

The code above listens for the 'scroll' event on the window and calls the 'loadMoreContent' function when the user scrolls to the bottom. The 'loadMoreContent' function makes an AJAX request to load more content and appends it to the page.

With onScrollBottom, we can also show a button or link to load more content instead of loading it automatically. This gives the user more control and prevents excessive server requests.

var page = 1;
var loadMoreButton = document.getElementById('load-more-button');

loadMoreButton.addEventListener('click', function() {
  page++;
  loadMoreContent(page);
});

window.addEventListener('scroll', function() {
  if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
    // User has scrolled to the bottom
    loadMoreButton.style.display = 'block';
  } else {
    loadMoreButton.style.display = 'none';
  }
});

function loadMoreContent(page) {
  // Make an AJAX request to load more content
  // Append the new content to the page
}

The code above shows a 'Load More' button that calls the 'loadMoreContent' function when clicked. It also listens for the 'scroll' event on the window and shows or hides the button depending on whether the user has scrolled to the bottom or not.