Sometimes, we want to get the scrollbar size of an element with JavaScript.
In this article, we’ll look at how to get the size of the scrollbar that’s part of a scrollable element with JavaScript.
Use the getBoundingClientRect Method and the scrollHeight Property with JavaScript
We can get the element’s scrollbar size with the getBoundingClientRect method and the scrollHeight property of an element with JavaScript.
To do this, we subtract the height property value retuned by getBoundingClientRect method by the scrollHeight property’s value to get the width of the horizontal scrollbar.
For instance, if we have:
<div id="app" style='width: 100px; overflow-x: scroll'></div>
Then we can add elements to the div and get the horizontal scrollbar height by writing:
const app = document.querySelector('#app')
for (let i = 0; i < 100; i++) {
const span = document.createElement('span')
span.textContent = i
app.appendChild(span)
}
const getScrollbarHeight = (el) =>{
return el.getBoundingClientRect().height - el.scrollHeight;
};
console.log(getScrollbarHeight(app))
We get the div with querySelector .
Then we add some spans into the div.
The div has width set and overflow-x set to scroll.
This means the div should have a horizontal scrollbar.
Next, we create the getScrollbarHeight function that subtracts the height from getBoundingClientRect by the scrollHeight , which gives us the height of the horizontal scrollbar.
Then we log the scrollbar height with console log.
Likewise, we can get the scrollbar width with:
<div id="app" style='height: 100px; overflow-y: scroll'></div>
and:
const app = document.querySelector('#app')
for (let i = 0; i < 100; i++) {
const p = document.createElement('p')
p.textContent = i
app.appendChild(p)
}
const getScrollbarHeight = (el) =>{
return el.getBoundingClientRect().width - el.scrollWidth;
};
console.log(getScrollbarHeight(app))
We add p elements into a div that’s scrollable vertically.
Instead of subtracting the heights, we subtract the widths.
And we should get the scrollbar width from the console log.
Conclusion
We can get the scrollbar width and height by calling the getBoundingClientRect method and the scroll width or height and getting the difference between the 2.
