Displaying results as you scroll down within a container

Question

Displaying results as you scroll down within a container

I want to create a feature similar to Facebook where more results are loaded when the page is scrolled down. I need to style both an outer and inner div for this implementation.

  .Outer{
      height: 1430px;
      margin-top: -12px;
      overflow: hidden;
      width: 99%;
    }
    .inner {
      height: 1435px;
      overflow-y: scroll;
      position: relative;
      width: 103%;
    }

To achieve this, I have two div elements named Inner and Outer. I have added an inline onscroll function to the inner div. Currently, I am able to scroll through records inside the Inner div without showing a scrollbar, with 10 records loaded initially. When I reach the 7th record while scrolling, I want to make a server call to fetch 10 more results and append them to the Inner div.

What is the best method to determine the scroll position at the 7th record and initiate a server action?

Considering that the website needs to be responsive, will the onscroll function work effectively on all devices? Are there any better approaches to meet this requirement?

javascript jquery html css object

Answer 1

Answer №1

I encountered a similar issue in the past.

Currently, I am using the following solution specifically tailored for Chrome:

var handleScroll = function(event) {

        var container = event.target;
        if ((container.scrollTop + container.offsetHeight) 
             + 1 >= container.scrollHeight) { 
             ...
        }
}

The main focus is on detecting when the user scrolls to the bottom without concerning yourself with the 7th record.

Furthermore, you can consider implementing these additional features:

Include a small animated image (such as a rotating circle) to indicate server data retrieval. This can be achieved by inserting an extra div at the top or bottom of your records based on the scroll direction, and removing it upon completion/error of the server call.

Be cautious about excessive onscroll events leading to frequent server calls. To prevent this, you can implement throttling/debouncing using a timer:

document.getElementById('myid').onscroll = function(oEvent) {
    if (this.timer) {
        clearTimeout(this.timer);
    }

    this.timer = setTimeout(function() {
        this.handleScroll(oEvent);
    }.bind(this), 250);
}.bind(this);

Answer 2

I encountered a similar issue in the past.

Currently, I am using the following solution specifically tailored for Chrome:

var handleScroll = function(event) {

        var container = event.target;
        if ((container.scrollTop + container.offsetHeight) 
             + 1 >= container.scrollHeight) { 
             ...
        }
}

The main focus is on detecting when the user scrolls to the bottom without concerning yourself with the 7th record.

Furthermore, you can consider implementing these additional features:

Include a small animated image (such as a rotating circle) to indicate server data retrieval. This can be achieved by inserting an extra div at the top or bottom of your records based on the scroll direction, and removing it upon completion/error of the server call.

Be cautious about excessive onscroll events leading to frequent server calls. To prevent this, you can implement throttling/debouncing using a timer:

document.getElementById('myid').onscroll = function(oEvent) {
    if (this.timer) {
        clearTimeout(this.timer);
    }

    this.timer = setTimeout(function() {
        this.handleScroll(oEvent);
    }.bind(this), 250);
}.bind(this);

Displaying results as you scroll down within a container

Answer №1

Similar questions

Troubleshooting problem with AJAX returning JSON values

Using (javascript:) within Href attributes

Change the CSS of a selector using jQuery before it is triggered

What strategies can I implement to minimize repetition in React when utilizing the useState hook?

Can AJAX be utilized to update a single attribute of a model?

The labels displayed on ChartJs are inaccurate

Steps for showing retrieved data individually:

Toggle the visibility of a table column based on user selection in Vue.js

Selecting the perfect default font using font-display: fallback

Is there an Angular Profile service offering getter and setter properties?

What impact does changing the Device Language have on a heading?

ajax used to retrieve xml data and process it

Capturing JSON response in Jquery

Tips for showcasing information on an HTML website

Selenium WebDriver is having trouble locating an element

The Mean Stack by Bitnami

What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

Attempting to connect JQuery to a different page through a data attribute connection

What is the procedure for incorporating JavaScript into my tic-tac-toe game's HTML and CSS?

When retrieving data from MongoDB using Map.get() in Node.js, it consistently yields undefined