.png)
When working with the DOM, there are four properties that developers often confuse: clientHeight , offsetHeight , scrollHeight , and scrollTop
They all sound similar, but each one measures a different aspect of an element. In this post, we’ll visualize what each property represents and learn when to use them.
Imagine a scrollable container
Suppose we have the following HTML.
// language: html
<div class="container">
...
</div>
<style>
.container {
height: 300px;
overflow-y: auto;
}
</style>
clientHeight
It includes:
- Content
- Padding
It does not include:
- Border
- Horizontal scrollbar
Example:
// language: javascript element.clientHeight // 300
A common use case is determining how much content is currently visible.
offsetHeight
It includes:
- Content
- Padding
- Border
- Horizontal scrollbar (if present)
Example:
// language: javascript element.offsetHeight // 304
If the element has a 2px border on both the top and bottom:
// language: javascript clientHeight = 300 border = 4 offsetHeight = 304
This property is useful when positioning or aligning elements in the layout.
scrollHeight
Example:
// language: javascript element.scrollHeight // 920
Even though only 300px is visible, the content itself is 920px tall. One common use case is detecting whether scrolling is needed.
// language: javascript
if (element.scrollHeight > element.clientHeight) {
console.log("Scrollable");
}scrollTop
Initially:
// language: javascript element.scrollTop // 0
After scrolling down:
// language: javascript +--------------------------+ | ▲ | | │ 180px | | ▼ | |--------------------------| | Current View | | | +--------------------------+ element.scrollTop // 180
You can also change it programmatically.
// language: javascript
element.scrollTop = 0;
// or with smooth scrolling
element.scrollTo({
top: 0,
behavior: "smooth"
});Practical questions
1. How do you determine whether an element is scrollable?
// language: javascript
function isScrollable(element) {
return element.scrollHeight > element.clientHeight;
}Why compare
>> Both scrollHeight and clientHeight measure the content area (including padding but excluding borders), making them directly comparable.
2. How do you know when the user has scrolled to the bottom?
The answer is:
// language: javascript const reachedBottom = element.scrollTop + element.clientHeight >= element.scrollHeight;
Why?
// language: javascript
scrollTop
+
clientHeight
=
Current Bottom PositionWhen that value reaches the total content height (scrollHeight ), you’ve arrived at the bottom.
3. How do you calculate the user’s scroll progress?
// language: javascript const progress = element.scrollTop / (element.scrollHeight - element.clientHeight);
Example:
// language: javascript
scrollHeight = 2000
clientHeight = 500
scrollTop = 750
Progress = 750 / (2000 - 500)
= 50%Typical applications:
- Reading progress bars
- Analytics
- Scroll-driven animations
4. How do you scroll an element to the bottom?
// language: javascript element.scrollTop = element.scrollHeight;
Or with smooth scrolling:
// language: javascript
element.scrollTo({
top: element.scrollHeight,
behavior: "smooth",
});Why don't we use
>> Theoretically, the maximum value of scrollTop is
