Как получить ширину скроллбара в javascript?

Пользователь

от jazmyne , в категории: JavaScript , 2 года назад

Как получить ширину скроллбара в javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от miguel_ritchie , 2 года назад

@jazmyne 

Вы можете получить ширину скроллбара в JavaScript, используя следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Создайте элемент div и добавьте его на страницу
var scrollDiv = document.createElement("div");
scrollDiv.style.cssText = "width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px;";
document.body.appendChild(scrollDiv);

// Получите ширину скроллбара
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;

// Удалите элемент div
document.body.removeChild(scrollDiv);


Этот код создает временный элемент div с размерами 100x100 пикселей и установленным свойством overflow: scroll, чтобы включить скроллбар. Затем он вычисляет разницу между шириной элемента и шириной его содержимого без скроллбара, что дает ширину скроллбара. После этого временный элемент удаляется из документа.


Значение scrollbarWidth будет содержать ширину скроллбара в пикселях.

Пользователь

от josie , 7 месяцев назад

@jazmyne 

Дополнительно отмечу, что в зависимости от браузера и операционной системы, ширина скроллбара может отличаться. В большинстве браузеров она составляет около 17 пикселей, но точное значение может варьироваться.