назад до уроку

Яка ширина смуги прокрутки?

важливість: 3

Напишіть код, який повертає ширину стандартної смуги прокрутки.

Для Windows це зазвичай 12px або 20px. Якщо браузер не резервує для прокрутки місця (смуга прокрутки напівпрозора над текстом), тоді може бути 0px.

P.S. Код повинен працювати для будь-якого HTML-документа, незалежно від його вмісту.

Щоб отримати ширину смуги прокрутки, ми можемо створити елемент із прокруткою, але без рамок і відступів.

Тоді різниця між його повною шириною offsetWidth і шириною внутрішньої області вмісту clientWidth буде саме ширина смуги прокрутки:

// створюємо div з прокруткою
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);