Detecting when user scrolls to bottom of div with React js

by

An even simpler way to do it is with scrollHeight, scrollTop, and clientHeight.

Subtract the scrolled height from the total scrollable height. If this is equal to the visible area, you’ve reached the bottom!

element.scrollHeight - element.scrollTop === element.clientHeight

In react, just add an onScroll listener to the scrollable element, and use event.target in the callback.

class Scrollable extends Component {

  handleScroll = (e) => {
    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (bottom) { ... }
  }

  render() {
    return (
      <ScrollableElement onScroll={this.handleScroll}>
        <OverflowingContent />
      </ScrollableElement>
    );
  }
}

I found this to be more intuitive because it deals with the scrollable element itself, not the window, and it follows the normal React way of doing things (not using ids, ignoring DOM nodes).

You can also manipulate the equation to trigger higher up the page (lazy loading content/infinite scroll, for example).

More Related Contents:

  1. “SyntaxError: Unexpected token < in JSON at position 0"
  2. ReactJS – Does render get called any time “setState” is called?
  3. React onClick function fires on render
  4. React Js conditionally applying class attributes
  5. React – User-Defined JSX Components Not rendering
  6. How to access a child’s state in React
  7. Is there any way to update a specific index from the array in Firestore
  8. How to have conditional elements and keep DRY with Facebook React’s JSX?
  9. How can I force a component to re-render with hooks in React?
  10. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  11. In React, what’s the difference between onChange and onInput?
  12. Github – unexpected disconnect while reading sideband packet
  13. How do you pass data when using the navigate function in react router v6
  14. How do I access store state in React Redux?
  15. Read Store’s Initial State in Redux Reducer
  16. How to pass state back to parent in React?
  17. In React.js should I make my initial network request in componentWillMount or componentDidMount?
  18. Is componentDidMount of parent called after all componentDidMount of children?
  19. Error “Error: A is only ever to be used as the child of element”
  20. ReactJS – Get Height of an element
  21. How to get selected value of a dropdown menu in ReactJS
  22. Retrieving value from with multiple option in React
  23. Images not loading when relative path is used in React
  24. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  25. Can’t call setState on a component that is not yet mounted
  26. How to properly use useHistory () from react-router-dom?
  27. React Error: “SharedArrayBuffer is not defined” in Firefox
  28. Object is not extensible error when creating new attribute for array of objects
  29. How to set iframe content of a react component
  30. How should I alternate componentWillMount()?

Leave a Comment