Существует ли кроссбраузерный способ вычисления ширины для полосы прокрутки?

Question

[romaro]

Используя эти советы, я пытаюсь вычислять как разницу между document.body.clientWidth и offsetWidth (с учетом бордеров), но хром возвращает одинаковые значения для этих параметров.

Answer 1

[Ilya Olovyannikov]

Первая ссылка на SOF

function getScrollbarWidth() {

  // Creating invisible container
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);

  // Creating inner element and placing it in the container
  const inner = document.createElement('div');
  outer.appendChild(inner);

  // Calculating difference between container's full width and the child width
  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

  // Removing temporary elements from the DOM
  outer.parentNode.removeChild(outer);

  return scrollbarWidth;

}

Comments

[romaro]

Забыл упомянуть этот пример с техническим созданием-удалением элемента. То есть пока что это единственный универсальный способ?

[Ilya Olovyannikov]

romaro, один раз на клиенте создаешь элемент и хранишь его в переменной или вызываешь, когда надо