javascript: failed to get scroll bar height accurately

Question

I was trying to get the scroll bar height, after some time i found a idea to get the height:

CSS:

#content {
    font-size: 18px;
    line-height: 90px;
    overflow: hidden;
}

#bt {
    background-color: #fff;
    width: 10px;
    outline: 1px solid red;
    position: fixed;
}

HTML:

 <button type="button" onclick="barHeight()">Press it</button>

 <div id="bt"></div>

 <div id="content">
  Lorem Ipsum is simply dummy tex.................
 </div>

JS:

function barHeight() {
 var scrHeight = window.innerHeight; // supposed to be 799 px
 var contentBox = document.getElementById("content");
 var contentHeight = contentBox.scrollHeight; //
 var targetHeight = ( ( scrHeight / contentHeight ) * 100 );
 var testBox = document.getElementById("bt");

 if(scrHeight < contentHeight) {
    testBox.style.height = targetHeight + "%";
 } else if( scrHeight > contentHeight ) {
    testBox.innerHTML = "0px";
 }


}

but when i measured it then its not accurate height as the actual scroll bar looks like.

Thanks in advance!

edited: How can I get the browser's scrollbar sizes? the solution in that link doesn't work for me, at least my script can easily be run and it works for me but not accurately,

Asons · Answer 1 · 2016-01-19T11:23:00.867

Here is yet another way.

The isScrollable (...) function check if the content div is overflowed and can be scrolled (an element with overflow: hidden is still scrollable though its scrollbar is hidden).

The getScrollBarSize (...) gets the width of a vertical scrollbar (a horizontal scrollbar has the same height).

function barHeight() {    
 if(isScrollable(document.getElementById("content"))) {
    document.getElementById("bt").innerHTML = getScrollBarSize() + "px";
 } else {
    document.getElementById("bt").innerHTML = "0px";
 }
}

function getScrollBarSize () {
  var el = document.createElement("div");
  el.setAttribute("style", "width:80px;height:80px;overflow:scroll;position: absolute;visibility:hidden;");
  document.body.appendChild(el);
  var elw = el.offsetWidth - el.clientWidth;
  document.body.removeChild(el);
  return (elw);
  
}
function isScrollable (el) {
  return el.scrollHeight > el.clientHeight;  
};

button {
  position: absolute;
  top: 5px;
  left: 300px;
}
#content {
    font-size: 8px;
    line-height: 30px;
    overflow: auto;
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

#bt {
    background-color: #9f9;
    width: 100px;
    outline: 1px solid red;
    position: fixed;
}

<button type="button" onclick="barHeight()">Press it</button>

 <div id="bt"></div>

 <div id="content">
  Lorem Ipsum is simply dummy tex.................<br>
  Lorem Ipsum is simply dummy tex.................<br>
  Lorem Ipsum is simply dummy tex.................<br>
  Lorem Ipsum is simply dummy tex.................<br>
  Lorem Ipsum is simply dummy tex.................<br>
  Lorem Ipsum is simply dummy tex.................<br>
  Lorem Ipsum is simply dummy tex.................<br>
  Lorem Ipsum is simply dummy tex.................<br>
  Lorem Ipsum is simply dummy tex.................<br>
 </div>

@forweb So i did. Can't see how this is not working? .. When space is available it sizes the `bt` div, when not, not. — Asons, Jan 03 '16 at 22:32
@forweb Are we talking about the size of the scrollbar itself, which is normally 16-22px wide (or high, if it's the horizontal scrollbar) ? — Asons, Jan 14 '16 at 15:50

javascript: failed to get scroll bar height accurately

1 Answers1