Member-only story
Check if Scrollbar is Visible with JavaScript
How to Check if a Scrollbar is Visible with JavaScript
Sometimes, we may want to check if a scrollbar is visible in our JavaScript web app.
In this article, we’ll look at how to check if a scrollbar is visible with JavaScript.
Comparing scrollHeight with clientHeight
The HTML element’s scrollHeight
property is a read-only property that is a measurement of the height of an element's content.
It includes the content that’s not visible on the screen due to overflow.
It’s measured in pixels.
The HTML element’s clientHeight
property is a read-only property that is zero for elements that have no CSS or inline frame layouts.
And it’s the number of pixels of the inner height including the padding but excluding the borders, margins, and horizontal scrollbars otherwise.
Therefore, we can compare the scrollHeight
of an element with its clientHeight
to…