How to check if a scrollbar is displayed in JavaScript

Let’s look at how to use the properties of the Document Object Model (DOM) to check whether a block has a scrollbar.

This is fairly simple to implement if you’re familiar with two DOM element properties— clientHeight and scrollHeight.

The clientHeight shows the height of the element’s client area—that is, the area where its content is displayed. The scrollHeight stores the height of all content, including content that extends beyond the client area when it has a scroll bar, which results in the entire inner area being hidden. Thus, by comparing these two parameters, you can determine whether a vertical scrollbar is displayed for the block.

If a scroll bar is present, the property scrollHeight will be greater than clientHeight. The same principle applies to horizontal scrolling and, accordingly, to the properties clientWidth and scrollWidth.

Code example:

<html>

<head>
    <script>
    function isVScroll(node) {
        return node.scrollHeight > node.clientHeight;
    }

    function isHScroll(node) {
        return node.scrollWidth > node.clientWidth;
    }

    function testOne(id) {
        let node = document.getElementById(id);
        alert(id + '. Верт. скролл: ' + isVScroll(node) + ', гор. скролл: ' + isHScroll(node));
    }

    function test() {
        for (n = 1; n < 5; n++)
            testOne('d' + n);
    }
    </script>
    <style>
    div {
        width: 200px;
        height: 40px;
        font-size: 14px;
        border: 3px solid red;
        overflow: auto;
    }
    </style>
</head>

<body>
    <button onclick='test();'>тестировать</button>
    <div id='d1'>asdshakdjshadkjshajdkhsakjdhkjsahdjkashdjksahdsjakhdjksahdjsahdjkhdjsahdsakjhdsajdhjksadsahjkhdsjahdjksahdjsahdjksahdkjsadksahdkjahdskadkasjhdsjahd</div>
    <div id='d2'>asds<br />asdsad<br />assafsaf<br />asdsad<br />asd</div>
    <div id='d3'>asdshakdjshadkjshajdkhsakjdhkjsahd<br />jkashdjksahdsjakhdjksahdjsahdjkhdjsahdsakj<br />hdsajdhjksadsahjkhdsjahdjksahdjsahdjksahdkjsadksahdkjahdskadkasjhdsjahd</div>
    <div id='d4'>asdsha</div>
</body>

</html>

This code can be pasted into a file with the .html extension. However, you may need to replace the quotation marks surrounding the lines with the correct ones afterward; otherwise, the program may not work, because in some cases they may be copied from the clipboard with distortions.

Here, the function isVScroll checks for the presence of a vertical scrollbar by comparing the properties scrollHeight and clientHeight. The function isHScroll checks whether a horizontal scroll bar is present. The function testOne tests a single block for the presence of scroll bars and displays information about their presence using alert. It takes one parameter—the block ID. The function test tests all 4 blocks in a loop.

Inside the tag body there are 4 blocks div, filled with content so that the first displays horizontal scrolling, the second displays vertical scrolling, and the third displays both. The fourth block has no scrollbars.

As for the styles, they simply specify the size of the blocks div, whether they have a red border, and the font size.