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;

5 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

Blogroll

Follow this blog by Email

Popular Posts