Question

160

Detecting when user scrolls to bottom of div with React js

rated 0 times [ 162] [ 2] / answers: 1 / hits: 168934 / 7 Years ago, wed, august 9, 2017, 12:00:00

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

  }

};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keric

Add To Favorites

Follow

Total Points: 572

Total Questions: 93

Total Answers: 97

Location: Cyprus

Member since Mon, Oct 24, 2022

2 Years ago

keric questions

1 Event.target.dataset returning undefined javascript

Thu, Dec 2, 21, 00:00, 3 Years ago

1 How to make a horizontal line without using < hr> tag?

Mon, Jul 19, 21, 00:00, 3 Years ago

1 Input with type=number that allows only numbers to be typed

Thu, Jul 15, 21, 00:00, 3 Years ago

1 Does declaring a React.memo inside another functional component provide the memoization performance as it is intended?

Sat, Jan 30, 21, 00:00, 3 Years ago

1 ReactJS useEffect() is running every time on page load

Thu, Nov 5, 20, 00:00, 4 Years ago

View All

answered 7 Years ago marissatinao · Accepted Answer

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

  }

};