В интернете множество способов вычисления ширины скролбара, основанных на innerWidth, clientWidth, offsetWidth и прочее, но они все возвращают целые числа, а ширина скролбара, неожиданно, может быть дробная, особенно при нестандартном DPI или масштабе страницы (пруф).
Написал свой вариант:
function getScrollbarWidth() {
const htmlElm = document.documentElement;
htmlElm.style.overflowY = 'hidden';
const widthWithoutScrollbar = htmlElm.getBoundingClientRect().width;
htmlElm.style.overflowY = 'scroll';
const widthWithScrollbar = htmlElm.getBoundingClientRect().width;
const scrollbarWidth = widthWithoutScrollbar - widthWithScrollbar;
htmlElm.style.removeProperty('overflow-y');
return Math.round(scrollbarWidth * 100) / 100;
}
Функцию можно вызывать из head, не дожидаясь загрузки body или события DOMContentLoaded.
Добавить комментарий