使用 JavaScript 获取滚动条宽度

javascript

2022-08-30 02:59:25

以下 HTML 将在 div.container 的右内边缘显示一个滚动条。

是否可以确定该滚动条的宽度？

<div class="container" style="overflow-y:auto; height:40px;">
  <div class="somethingBig"></div>
</div>

答案 1

此功能应为您提供滚动条的宽度

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;

}

此处的基本步骤如下：

创建隐藏的 div（外部）并获取其偏移宽度
使用 CSS 溢出属性强制滚动条显示在 div（外部）中
创建新的 div（内部）并追加到外部，将其宽度设置为“100%”并获取偏移宽度
根据收集的偏移量计算滚动条宽度

这里的工作原理：http://jsfiddle.net/slavafomin/tsrmgcu9/

更新

如果在 Windows（地铁）应用上使用它，请确保将“外部”div 的 -ms-overflow 样式属性设置为，否则将无法正确检测到宽度。（代码已更新）scrollbar

更新 #2这在默认为“滚动时仅显示滚动条”设置（Yosemite及更高版本）的Mac OS上不起作用。

答案 2

// offsetWidth 包括滚动条的宽度，而 clientWidth 不包括。通常，它等于14-18px。所以：

 var scrollBarWidth = element.offsetWidth - element.clientWidth;