Skip to content

Instantly share code, notes, and snippets.

@enqtran
Last active May 25, 2022 19:16
Show Gist options
  • Save enqtran/25c6b222a73dc497cc3a64c090fb6700 to your computer and use it in GitHub Desktop.
Save enqtran/25c6b222a73dc497cc3a64c090fb6700 to your computer and use it in GitHub Desktop.
[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);
}
@johnnykramer
Copy link

Thank you God that I found u!

@adueck
Copy link

adueck commented Sep 28, 2018

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.

@ntamvl
Copy link

ntamvl commented Nov 20, 2018

Thanks! 👍

@kapilmyakal
Copy link

Thanks You Sir

@cmwakio
Copy link

cmwakio commented Apr 8, 2019

Thanks, works like charm

@ifier
Copy link

ifier commented Jun 11, 2019

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

@lalosh
Copy link

lalosh commented Oct 8, 2019

Thank you so much. :D

@enqtran
Copy link
Author

enqtran commented Oct 8, 2019

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)) { }

@anhtran
Copy link

anhtran commented Feb 24, 2020

Thank you for this!

@RaulS963
Copy link

Thanks

@TendiF
Copy link

TendiF commented Nov 10, 2020

love it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment