2024-08-27
1906
#react
Ogundipe Samuel
1837
Aug 27, 2024 â‹… 6 min read

What is infinite scrolling: Implementing it in React

Ogundipe Samuel Software engineer and technical writer.

Recent posts:

How To Audit And Validate AI-Generated Code Output

How to audit and validate AI-generated code output

Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.

Boemo Mmopelwa
Dec 2, 2024 â‹… 5 min read
Building A Background Remover With Vue And Transformers.js

Building a background remover with Vue and Transformers.js

Build a real-time image background remover in Vue using Transformers.js and WebGPU for client-side processing with privacy and efficiency.

Emmanuel John
Nov 29, 2024 â‹… 9 min read
Managing Search Parameters In Next.js With Nuqs

Managing search parameters in Next.js with nuqs

Optimize search parameter handling in React and Next.js with nuqs for SEO-friendly, shareable URLs and a better user experience.

Jude Miracle
Nov 27, 2024 â‹… 10 min read
React logo over a beige background

Data fetching with Remix’s loader function

Learn how Remix enhances SSR performance, simplifies data fetching, and improves SEO compared to client-heavy React apps.

Abhinav Anshul
Nov 26, 2024 â‹… 5 min read
View all posts

2 Replies to "What is infinite scrolling: Implementing it in React"

  1. Hi,
    Thanks,

    I followed you & implemented the infinite scroll. I have been facing this issue.
    I have set page size 30, So for each API response I receive the 30 data. The problem is, when I open the application in big screen like TV/projector, Initial API call loads the 30 data & no scroll appear due to large screen. But I have 1000 data in Database.

    I told team, We could increase the initial page size 100, then they asked suppose after increased size What If the scroll doesn’t appear on window. More over, they want to keep page size 30 only, do not want to change.

    How to solve when I open the application in big screen, load the data until scroll appear?

  2. This error occured because you did not specify the context in which the infinite scroll should work. It defaults to the viewport if not set.

    The solution is that you pass in the root which is a selector to the options object as shown below.

    let options = {
    root: document.querySelector(“#scrollArea”),
    rootMargin: “0px”,
    threshold: 1.0,
    };

    let observer = new IntersectionObserver(callback, options);

Leave a Reply