Рассмотрим как с помощью свойств объектной модели документа (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, наличие у них красной рамки и размер шрифта.
