获取水平滚动条的高度

Question

我遇到了一个问题，我需要知道水平滚动条的高度。

此问答建议您应该使用clientHeight属性并计算差异。不幸的是，这不再起作用了，这里很明显https://jsfiddle.net/fn8naww8/

那么如何获取滚动条的高度呢？

编辑：OSX 不区分 offsetHeight 和 clientHeight。

html：

<div id="wrapper">
  <div id="content"></div>
</div>

css：

#wrapper{
  height:100px;
  width:100%;
  overflow-x:auto;
}
#content{
  height:100%;
  width:200%;
  background:linear-gradient(to right, red , yellow);
}

Answer 1

尝试：

var horizontalScrollbarHeight = wrapper.offsetHeight - wrapper.clientHeight; 

或喜欢：

var horizontalScrollbarHeight = wrapper.offsetHeight - parseInt(window.getComputedStyle(wrapper, null).getPropertyValue("height"), 10); 

~17如果滚动条大小没有被 CSS 像使用一样改变，两者都将返回::-webkit-scrollbar

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle