获取水平滚动条的高度

Question

I encountered a problem where I need to know of the height of horizontal scrollbar.

This Q&A suggests that you should use clientHeight property and calculate difference. Unfortunately this does not work anymore as is evident here https://jsfiddle.net/fn8naww8/

So how can I get the height of scrollbar?

EDIT : OSX does not differentiate between offsetHeight and 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

Try with:

var horizontalScrollbarHeight = wrapper.offsetHeight - wrapper.clientHeight; 

or like:

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

Both will return ~17 if the scrollbar size was not altered by CSS like by using ::-webkit-scrollbar

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

Answer 2

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

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

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

This will return 100px for wrapper and 83px for inner.

Answer 3

There is a magic number: “17px”. Seems this height/width does not change even if you resize the browser window. And it works on Chrome fine with my test.