Как на JavaScript проверить, отображается ли у блока полоса прокрутки?

Рассмотрим как с помощью свойств объектной модели документа (DOM) проверить, есть ли у блока полосы прокрутки.

Это довольно просто реализовать, если знать про два свойства элементов DOM — clientHeight и scrollHeight.

Свойство clientHeight показывает высоту клиентской области элемента, то есть той области, в которой отображается его содержимое. Свойство scrollHeight хранит высоту всего содержимого. В том числе и выходящего за клиентскую область, когда она имеет полосу прокрутки (scroll bar), в результате чего всю внутреннюю область не видно. Таким образом, сравнив эти два параметра, можно выяснить, отображается ли у блока вертикальный скролл (scroll bar).

При наличии полосы прокрутки свойство scrollHeight будет больше, чем clientHeight. Тот же принцип действует и в случае с горизонтальной прокруткой и, соответственно, свойствами clientWidth и scrollWidth.

Пример кода:

<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>

Этот код можно вставить в файл с расширением .html. Однако, после этого может понадобиться заменить кавычки, ограничивающие строки, на правильные, иначе программа может не работать, потому что в некоторых случаях они могут копироваться через буфер обмена с искажениями.

Тут функция isVScroll проверяет наличие вертикальной полосы для прокрутки с помощью сравнения свойств scrollHeight и clientHeight. Функция isHScroll проверяет, присутствует ли горизонтальный scroll bar. Функция testOne тестирует один блок на наличие полос и выводит информацию об их присутствии с помощью alert. Она принимает один параметр — идентификатор блока. Функция test в цикле тестирует все 4 блока.

Внутри тега body находятся 4 блока div, заполненные содержимым так, что у первого отображается горизонтальная прокрутка, у второго — вертикальная, у третьего — обе. У четвертого из них этих полос нет.

Что касается стилей, то они просто задают размер блоков div, наличие у них красной рамки и размер шрифта.

Сергей Ермилов