Узнать ширину полосы прокрутки
важность: 3
Напишите код, который возвращает ширину стандартной полосы прокрутки.
Для Windows она обычно колеблется от 12px
до 20px
. Если браузер не выделяет место под полосу прокрутки (так тоже бывает, она может быть прозрачной над текстом), тогда значение может быть 0px
.
P.S. Ваш код должен работать в любом HTML-документе, независимо от его содержимого.
Чтобы получить ширину полосы прокрутки, создадим элемент с прокруткой, но без рамок и внутренних отступов.
Тогда разница между его полной шириной offsetWidth
и шириной внутреннего содержимого clientWidth
будет равна как раз прокрутке:
// создадим элемент с прокруткой
let div = document.createElement('div');
div.style.overflowY = 'scroll';
div.style.width = '50px';
div.style.height = '50px';
// мы должны вставить элемент в документ, иначе размеры будут равны 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;
div.remove();
alert(scrollWidth);