2020-02-10
2920
#react
Denis Hilt
13694
Feb 10, 2020 ⋅ 10 min read

Virtual scrolling: Core principles and basic implementation in React

Denis Hilt JavaScript developer, remote contractor, open source developer.

Recent posts:

Parsing PDFs in Node.js

Parsing PDFs in Node.js

This guide covers the top npm packages for parsing PDFs in Node.js, including pdf-parse, pdf2json, and pdfreader.

Chibuike Nwachukwu
Mar 4, 2024 ⋅ 7 min read
Implementing In App Updates For React Native Apps

Implementing in-app updates for React Native apps

Implementing OTA in-app updates in React Native apps can streamline the update process, preventing delays that hinder overall productivity.

Nelson Michael
Mar 1, 2024 ⋅ 7 min read
Exploring Stylex And The New Generation Of Styling Libraries

Exploring StyleX and the new generation of styling libraries

StyleX is a build-time, type-safe CSS-in-JS library recently open sourced by Meta. Explore StyleX and the evolution of styling libraries.

Ibadehin Mojeed
Feb 29, 2024 ⋅ 9 min read
Building High Performance Ecommerce Sites With Astro

Building high-performance ecommerce sites with Astro

Learn to set up a completely custom Astro ecommerce implementation that’s also highly performant and type-safe in this straightforward guide.

Onuorah Bonaventure
Feb 28, 2024 ⋅ 64 min read
View all posts

13 Replies to "Virtual scrolling: Core principles and basic implementation in React"

  1. Nice idea with custom component.. But Just wonder what changes should we do if we want the scroll for whole window not for a scrollable div and elements inside.

    Thanks

  2. Hey! I just made quick demo for the entire window case based on the original approach:

    https://codesandbox.io/s/dhilt-react-virtual-scrolling-entire-window-hr9fc

    I tried to persist basic ideas, but you’ll see some differences:

    – react onScroll event had been replaced with plain old addEventListener of global “window”, and we rely on window.scrollY now;

    – “amount” setting is gone due to window height might be random; now it is calculated as window.innerHeight / itemHeight rounded down; I’m pretty sure, it would be better if we’d change the concept and move to fractional approach, but this is cheaper, more consistent with previous version and still works;

    – class component had been turned into a functional one; this.state and didMount are replaced with useState and useEffect; they are performant, no extra calls.

  3. “`
    // 8) initial height of the bottom padding element (px)
    const bottomPaddingHeight = totalHeight – topPaddingHeight
    “`
    From the name, ‘topPaddingHeight’ and ‘bottomPaddingHeight’ have similar meanings. I think ‘bottomPaddingHeight’ is height of ‘bottom-virtual-rows’. So, bottomPaddingHeight = totalHeight – topPaddingHeight – viewportHeight – 2*toleranceHeight.
    Looking forward to your reply.

  4. I’m trying to put the example (from codesandbox) you provided into my MVC application. First I have to use type=”text/babel” in script tags when I add them into HTML page. Second, when I’m running the site then, I see that it fails with:

    VM3783:3 Uncaught ReferenceError: exports is not defined
    at :3:23
    at i (babel.min.js:24)
    at r (babel.min.js:24)
    at e.src.n..l.content (babel.min.js:24)
    at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)

    Can you please help?

  5. UPD: Solved the issue above. Another question – how can I link the grid to depend on the parent element scroll event, but not the entire window? The grid will be a certain height with a scroll, and when I mouse scroll inside the element, or move the scroll control on the right, then scroll event shall fire.

  6. It looks like a compile error. Don’t know what the infrastructure you are trying to build, I would suggest to look at the configuration on the github repo (link at the top of the article) as it provides pretty common way of compiling and running ReactJS application. The sample has no any additional external dependencies, only React core, so the question could be asked as following: “how to run simplest ReactJS application”.

  7. Just to clarify, why are we copying the settings from the props to the state? I don’t think we are ever setting `settings` state internally, right? Nor would we even in more complex implementations. Thanks!

    1. Agree. Basically, we are initializing state with props, and, there should be copying by value instead of reference, like { settings: { …settings }, … }. This should provide immutability for outer settings. Then we could think on listening for the props.settings change and provide state recalculation.

  8. Hi!
    I’ve implemented this but sometimes when I start scrolling at some point scroll kinda loops and keeps going down and padding keeps growing bigger automatically. Any ideas on what the issue may be?

Leave a Reply