Detecting When User Scrolls to Bottom of Div With React Js

Detecting when user scrolls to bottom of div with React js

you can use el.getBoundingClientRect().bottom to check if the bottom has been viewed

isBottom(el) {
  return el.getBoundingClientRect().bottom <= window.innerHeight;
}

componentDidMount() {
  document.addEventListener('scroll', this.trackScrolling);
}

componentWillUnmount() {
  document.removeEventListener('scroll', this.trackScrolling);
}

trackScrolling = () => {
  const wrappedElement = document.getElementById('header');
  if (this.isBottom(wrappedElement)) {
    console.log('header bottom reached');
    document.removeEventListener('scroll', this.trackScrolling);
  }
};

Check if user reached the bottom of the page react

Add the listener to the window object:

const App = () => {
  const handleScroll = () => {

    const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight

    if (bottom) {
      console.log('at the bottom');
    }
  };
  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll, {
      passive: true
    });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <div className = " > < /div>

};

ReactDOM.render( < App / > , document.getElementById("root"));

. {
  height: 200vh;
  width: 100%;
  background-color: mediumseagreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
<div id="root"></div>

react-window how to know if its scrolled to bottom

From you question I'm assuming you are using the component from the link given.

If so I would add a wrapper div with an onScroll listener to it like so:

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    Row {index}
  </div>
);

class Example extends Component {
  scrollCheck = event => {
    const bottom = event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight;
    if (bottom) {
      console.log("At The Bottom"); //Add in what you want here
    }
  };

  render() {
    return (
      <Fragment>
        <div onScroll={this.scrollCheck}>
          <List
            className="List"
            height={150}
            itemCount={1000}
            itemSize={35}
            ref={this.listRef}
            width={300}
            id="myDiv"
          >
            {Row}
          </List>
        </div>
      </Fragment>
    );
  }
}

Your question is very similar to here so maybe check that out too.

Detect bottom of page to fetch more data in react

Put this in your componentWillMount()

window.addEventListener('scroll', function() {
   if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      console.log("you're at the bottom of the page");
      // Show loading spinner and make fetch request to api
   }
});

Don't forget to kill your event Listeners in componentWillUnmount() to prevent memory leaks.

Check if a user has scrolled to the bottom (not just the window, but any element)

Use the .scroll() event on window, like this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document). If you wanted to instead check if the user is near the bottom, it'd look something like this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

You can test that version here, just adjust that 100 to whatever pixel from the bottom you want to trigger on.

Detecting When User Scrolls to Bottom of Div With React Js