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
now open index.html in browser

Program Flow

  1. Bind scroll event to window
  2. Calculate whole document height
  3. Get height of the window
  4. Calculate bottom of window
  5. 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;

16 comments:

  1. You made my day man!

    This works like a charm

    Thank you

    ReplyDelete
  2. Thank you, for an easy walk through :) This helped a lot.

    ReplyDelete
  3. There are some problems with Mozilla Firefox.
    Sometimes the function bottom reached is not called. Somebody knows how to fix that?

    ReplyDelete
  4. Hey man. You are awesome. I finally found it after a long struggle

    ReplyDelete
  5. What should i change if i want to detect when i reach the bottom of component, for example the bottom of a modal?

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Thank you so much, you save my life.
    If 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

    ReplyDelete
  9. Implemented lazy loading using this. Worked like a charm!!

    ReplyDelete
  10. Thank You so much. :) This helped a lot.

    ReplyDelete
  11. thanks, smart! you make me save my time too much.
    I hope you to post a lot of valuable things
    thanks again

    ReplyDelete

Blogroll

Popular Posts