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:

A Guide To The React UseReducer Hook

A guide to the React useReducer Hook

The useReducer React Hook is a good alternative to tools like Redux, Recoil, or MobX.

Ejiro Asiuwhu
Oct 10, 2024 â‹… 13 min read
Using The Built-In SQLite Module In Node.js

Using the built-in SQLite module in Node.js

Node.js v22.5.0 introduced a native SQLite module, which is is similar to what other JavaScript runtimes like Deno and Bun already have.

Amazing Enyichi Agu
Oct 10, 2024 â‹… 12 min read
Understanding and supporting zoom behaviors on the web

Understanding and supporting zoom behaviors on the web

Understanding and supporting pinch, text, and browser zoom significantly enhances the user experience. Let’s explore a few ways to do so.

Fimber Elemuwa
Oct 9, 2024 â‹… 7 min read
Comedy and tragedy masks symbolizing Playwright Extra's ability to extend Playwright with customizable plugins for both stealth and interactive browser automation tasks.

Playwright Extra: extending Playwright with plugins

Playwright is a popular framework for automating and testing web applications across multiple browsers in JavaScript, Python, Java, and C#. […]

Antonello Zanini
Oct 8, 2024 â‹… 9 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