[ReactJS] Detect Scrolls To Bottom

[ReactJS] Detect Scrolls To Bottom

constructor(props) {
        super(props);
        this.state = {
            height: window.innerHeight,
            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);
    }

On Chrome 69 on Windows Desktop I needed to round up windowBottom to make this work

I changed line 14 to:

const windowBottom = Math.round(windowHeight + window.pageYOffset);

And then it worked great for me.

Sometimes it will not work on the windows as well. There are some cases when it is not rounded properly (rare cases, but they are).
For example: 15220.03423423423 will be rounded to the 15220 and it will be less then 15221.

// Small hack for windows. Window counts windowBottom in another way
const difference = docHeight - windowBottom;
const additional = difference >= 1 && difference <= 2 ? difference : 0;

Any thoughts? My way is not best, I guess :(

My whole Function:

const detectScrollAtBottom = () => {
  const windowHeight = window.innerHeight
    ? window.innerHeight
    : document.documentElement.offsetHeight;
  const { body } = document;
  const html = document.documentElement;
  const docHeight = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );
  const windowBottom = Math.round(windowHeight + window.pageYOffset);

  // Small hack for windows. It counts windowBottom in different way
  const difference = docHeight - windowBottom;
  const additional = difference >= 1 && difference <= 2 ? difference : 0;

  return windowBottom + additional >= docHeight;
};

Thank you so much. :D

Sometimes it will not work on the windows as well. There are some cases when it is not rounded properly (rare cases, but they are).
For example: 15220.03423423423 will be rounded to the 15220 and it will be less then 15221.

// Small hack for windows. Window counts windowBottom in another way
const difference = docHeight - windowBottom;
const additional = difference >= 1 && difference <= 2 ? difference : 0;

Any thoughts? My way is not best, I guess :(

My whole Function:

const detectScrollAtBottom = () => {
  const windowHeight = window.innerHeight
    ? window.innerHeight
    : document.documentElement.offsetHeight;
  const { body } = document;
  const html = document.documentElement;
  const docHeight = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );
  const windowBottom = Math.round(windowHeight + window.pageYOffset);

  // Small hack for windows. It counts windowBottom in different way
  const difference = docHeight - windowBottom;
  const additional = difference >= 1 && difference <= 2 ? difference : 0;

  return windowBottom + additional >= docHeight;
};

Sometimes loadmore doesn't need to touch bottom :D

if (windowBottom >= (docHeight * 0.8)) { }

Thank you for this!

Thanks

love it