Whenever user scroll to the bottom, we can show Go to top button to make user reached to top of the page. This program will help you to find out bottom of the page.
To Run Example Code
execute below commands
npm install
npm start
npm start
now open index.html in browser
Program Flow
- Bind scroll event to window
- Calculate whole document height
- Get height of the window
- Calculate bottom of window
- If window bottom is greater than or equal to document height then user reached to bottom
ReactJS Component
import React from 'react'; import classNames from 'classnames'; class ScrollDetector extends React.Component { constructor(props) { super(props); this.state = { 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); } render() { return ( <div> <div className="fixedDiv">{this.state.message}</div> <div className="scrollDiv"></div> </div> ); } } ScrollDetector.propTypes = { } ScrollDetector.defaultProps = { } export default ScrollDetector;
You made my day man!
ReplyDeleteThis works like a charm
Thank you
Thank you, for an easy walk through :) This helped a lot.
ReplyDeleteThere are some problems with Mozilla Firefox.
ReplyDeleteSometimes the function bottom reached is not called. Somebody knows how to fix that?
Hey man. You are awesome. I finally found it after a long struggle
ReplyDeleteWhat should i change if i want to detect when i reach the bottom of component, for example the bottom of a modal?
ReplyDeleteyo , i also want to know this
Deletethanks! it works for me.
ReplyDeleteThank you very much!!!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you so much, you save my life.
ReplyDeleteIf someone needs that the event fires when the wheel is scrolled, even if there is no scroll bar, use the event 'wheel', and add the condition event.deltaY > 0
Implemented lazy loading using this. Worked like a charm!!
ReplyDeleteTHANK YOU SO SO SO MUCH!
ReplyDeleteThank You so much. :) This helped a lot.
ReplyDeletethanks, smart! you make me save my time too much.
ReplyDeleteI hope you to post a lot of valuable things
thanks again
ReplyDeletethank you for sharing this information is very helpful for me and I bookmarked your site because I found your content important for me.
Love back Solution Specialist
Love Marriage Specialist
love marriage specialist astrologer Love marriage specialist in Hyderabad love marriage specialist in Bangalore Love marriage specialist in Kolkata Love marriage astrology Love marriage specialist in Qatar Love marriage specialist in Italy