get the height of horizontal scrollbar

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