Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save anhtran/9f6e6b58a003fe11963b3941294c6d65 to your computer and use it in GitHub Desktop.
Save anhtran/9f6e6b58a003fe11963b3941294c6d65 to your computer and use it in GitHub Desktop.
[ReactJS] Detect Scrolls To Bottom
constructor(props) {
super(props);
this.state = {
height: window.innerHeight,
message: 'not at bottom'
};
this.handleScroll = this.handleScroll.bind(this);
}
handleScroll() {
const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
const body = document.body;
const html = document.documentElement;
const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
const windowBottom = windowHeight + window.pageYOffset;
if (windowBottom >= docHeight) {
this.setState({
message: 'bottom reached'
});
} else {
this.setState({
message: 'not at bottom'
});
}
}
componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.handleScroll);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment