Question

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

此Q＆amp; A建议您使用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);

如果滚动条大小未被CSS更改，则两者都将返回~17，例如使用::-webkit-scrollbar

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

Answer 2

＆＃13;

console.log(window.getComputedStyle(document.querySelector("#wrapper")).height);
console.log(window.getComputedStyle(document.querySelector("#content")).height);

＆＃13;

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

＆＃13;

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

＆＃13;

这将为包装器返回100px，为内层返回83px。

Answer 3

有一个神奇的数字：“17px”。即使您调整浏览器窗口大小，似乎此高度/宽度也不会更改。通过我的测试，它适用于Chrome。

获取水平滚动条的高度

3 个答案: