使用JavaScript获取滚动条的宽度

Z时代
2024-01-10
分类：问答

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

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

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

回答：

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

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;
}