How to Check if a User Scrolled to the Bottom
source link: https://blog.bitsrc.io/how-to-check-if-a-user-scrolled-to-the-bottom-6c825176235e
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Check if a User Scrolled to the Bottom
Photo by Tim Schmidbauer on Unsplash
Let me first create a case with scrollbars:
<style>
* {
margin: 0;
}
html,
body {
height: 100%;
}
#app {
width: 100%;
height: 100%;
overflow-y: auto;
}
</style><body>
<div id="app"></div>
</body><script>
const root = document.getElementById('app');
const html = [...Array(50)].fill('<br />').join('');
root.innerHTML = html;
</script>
It contains some reset styles, then we create 50 <br /> and insert them into a div element with id app .
Then you can use scrollTop, scrollHeight, and clientHeight to determine whether to scroll to the bottom, the condition is:
Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1
You may be wondering why 1 is used. This is because scrollTop is a non-rounding number, while scrollHeight and clientHeight are rounded. So the only way to determine if the scroll area is scrolled to the bottom is to see if the scroll amount is close enough to some threshold.
If you insist on using equals, it probably won’t work all the time! Because scrollTop can contain decimals:
// It will not always work. Not recommended.
element.scrollHeight - element.clientHeight === element.scrollTop;
Here is the complete example:
Scroll to the bottom to see if it was successful.
Next, let’s explain the meaning of these three properties:
The first is Element.scrollHeight, it is a measurement of the height of an element's content, including content not visible on the screen due to overflow.
Image by MDN
Next is Element.clientHeight, which is the inner height of the element. It includes padding but excludes borders, margins, and horizontal scrollbars (if present). So clientHeight can be calculated as: CSS height + CSS padding - height of horizontal scrollbar (if present).
And finally Element.scrollTop, it is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0.
Don’t forget that scrollTop is a non-rounding number, while scrollHeight and clientHeight are rounded.
Thanks for reading. Do you have any other good way to do this?
Bit: Build Better UI Component Libraries
Say hey to Bit. It’s the #1 tool for component-driven app development.
With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.
- Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
- Easily share, and reuse components as a team.
- Quickly update components across projects.
- Make hard things simple: Monorepos, design systems & micro-frontends.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK