See More

Ми хочемо зробити цей проєкт з відкритим кодом доступним для людей у всьому світі.

Допоможіть перекласти цей підручник вашою мовою!

КупитиEPUB/PDF
Навчальна карта
назад до уроку

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

важливість: 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);