Detecting when user scrolls to bottom of div with React js

I have a website with different sections. I am using segment.io to track different actions on the page. How can I detect if a user has scrolled to the bottom of a div? I have tried the following but it seems to be triggered as soon as I scroll on the page and not when
I reached the bottom of the div.

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


trackScrolling = () =>
const wrappedElement = document.getElementById('header');
if (wrappedElement.scrollHeight - wrappedElement.scrollTop === wrappedElement.clientHeight)
console.log('header bottom reached');
document.removeEventListener('scroll', this.trackScrolling);

;


3 Answers
3

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

el.getBoundingClientRect().bottom

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);

;


document.removeEventListener

componentWillUnmount

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

You simply 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.

event.target

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).

window

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

We can also detect div's scroll end by using ref.

import React, Component from 'react';
import withRouter from 'react-router-dom';
import styles from 'style.scss';

class Gallery extends Component

paneDidMount = (node) =>
if(node)
node.addEventListener("scroll", this.handleScroll.bind(this));



handleScroll = (event) =>
var node = event.target;
const bottom = node.scrollHeight - node.scrollTop === node.clientHeight;
if (bottom)
console.log("BOTTOM REACHED:",bottom);



render()
var that = this;
return(<div className=styles.gallery>
<div ref=that.paneDidMount className=styles.galleryContainer>
...
</div>

</div>);



export default withRouter(Gallery);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.