使用JavaScript获取滚动条宽度

Question

使用JavaScript获取滚动条宽度

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

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

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

Answer 1

// offsetWidth包括滚动条的宽度，而clientWidth则不包含。按规则，它等于14-18px。所以： var scrollBarWidth = element.offsetWidth - element.clientWidth;

Answer 2

如果孩子占用容器的整个宽度（不包括滚动条）（默认值），则可以减去宽度：var child = document.querySelector(".somethingBig");var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;