Get the default height of a scroll bar

Question

What is the default height of a scroll bar(Horizontal)? I couldn't find the document online.

UPDATED: Can we write a javascript function to get it? Please don't down vote it. It is hard to get it. height. Thank you.

..."default height of a scroll bar (Horizontal)? - Height == Vertical, Width = Horizontal. Your question is quite confusing. — iambriansreed, Apr 09 '12 at 20:46
http://stackoverflow.com/questions/986937/javascript-get-the-browsers-scrollbar-sizes — iambriansreed, Apr 09 '12 at 20:57

score 2 · Accepted Answer · edited May 23 '17 at 12:30

Found this here: How can I get the browser's scrollbar sizes?

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

alert( getScrollBarWidth () );

nice. a more well-developed version of what I proposed in my fiddle. — ben author, Apr 09 '12 at 21:08

score 0 · Answer 2 · answered Apr 09 '12 at 20:19

0

That's going to depend on the clients screen resolution and browser. If you explain why your asking then I might be able to give a better answer.

answered Apr 09 '12 at 20:19

Ash Burlaczenko

24,778
15
68
99

score 0 · Answer 3 · answered Apr 09 '12 at 20:19

Whatever the user's computer is set to. There is no hard-and-fast rule on this. For example, on my Ubuntu machine, the default scroll bar size is 0 - instead of a conventional scrollbar, it has a scroll line with arrows that appear when the mouse moves near it, and it takes no space on the document. However, on my Windows installation, the scrollbar size is 14 pixels, but I could set it from anything between about 8 and over 500...

score 0 · Answer 4 · answered Apr 09 '12 at 21:03

Interesting question. My thought is: when a property you are interested in is not readily available, test.

One DOM property I can think of that would be affected by the scrollbar height is the clientHeight of the body (or whatever box has the scrollbar) if you set it to 100%. This is maybe a dumb approach, and not sure how useful it really is, but check it out:

get clientHeight before
expand width of an internal element, wide enough to cause a scrollbar
get clientHeight after
subtract

I made a fiddle of this. Like I said, not sure how useful this approach could be in real life, but maybe it's a start on something. http://jsfiddle.net/brico/t6zMN/

Get the default height of a scroll bar

4 Answers4