Infinite scrolling with React JS

by

Basically when scrolling you want to decide which elements are visible and then rerender to display only those elements, with a single spacer element on top and bottom to represent the offscreen elements.

Vjeux made a fiddle here which you can look at: jsfiddle.

Upon scrolling it executes

scrollState: function(scroll) {
    var visibleStart = Math.floor(scroll / this.state.recordHeight);
    var visibleEnd = Math.min(visibleStart + this.state.recordsPerBody, this.state.total - 1);

    var displayStart = Math.max(0, Math.floor(scroll / this.state.recordHeight) - this.state.recordsPerBody * 1.5);
    var displayEnd = Math.min(displayStart + 4 * this.state.recordsPerBody, this.state.total - 1);

    this.setState({
        visibleStart: visibleStart,
        visibleEnd: visibleEnd,
        displayStart: displayStart,
        displayEnd: displayEnd,
        scroll: scroll
    });
},

and then the render function will display only the rows in the range displayStart..displayEnd.

You may also be interested in ReactJS: Modeling Bi-Directional Infinite Scrolling.

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. How to create a translucent in React Native?
  3. Why calling setState method doesn’t mutate the state immediately?
  4. Insert HTML with React Variable Statements (JSX) [duplicate]
  5. Render HTML string as real HTML in a React component
  6. When to use functional setState
  7. Concatenating variables and strings in React
  8. ReactJS – .JS vs .JSX
  9. React.js: Set innerHTML vs dangerouslySetInnerHTML
  10. How to render HTML string as real HTML?
  11. ReactJS: “Uncaught SyntaxError: Unexpected token
  12. How to add custom html attributes in JSX
  13. javascript change background color on click [closed]
  14. React: why child component doesn’t update when prop changes
  15. React: how to load and render external html file?
  16. Updating source URL on HTML5 video with React
  17. Where’s the connection between index.html and index.js in a Create-React-App application?
  18. Support for the experimental syntax ‘jsx’ isn’t currently enabled
  19. css position absolute making the textbox go down
  20. Adding a new line in a JSX string inside a paragraph – React
  21. React.js this.props.data.map() is not a function
  22. Using Matter.js to render to the DOM or React
  23. React: Script tag not working when inserted using dangerouslySetInnerHTML
  24. render html in state string [duplicate]
  25. React, losing saved data in localStorage with useEffect after page refresh
  26. Images not loading when relative path is used in React
  27. Next.js: Error: React.Children.only expected to receive a single React element child
  28. Measuring text width/height without rendering
  29. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  30. How to parse html to React component?

Leave a Comment