Javascript → Вычислить ширину скролбара

28.03.2024

В интернете множество способов, основанных на 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.

Демо

Похожие записи

Добавить комментарий