Get scrollbar width in JavaScript

15 Dec 2017

What about something more generic? what about a regular div for example? A more general approach would be:

function getScrollbarWidth(element) {
  return element.scrollWidth - element.clientWidth;
} 

The scrollWidth property will include the with of the vertical scrollBars even if there is no horizontal scrolling…this works in all major browsers.

Hello Jandro,

Actually that is not going to work. To get element’s scrollbar width you need to use .offsetWidth instead of .scrollWidth.

Check MDN documentation on it:

The width is measured in the same way as clientWidth: it includes the element’s padding, but not its border, margin or vertical scrollbar (if present).

So the correct way would be:

function getScrollbarWidth(element) {
  return element.offsetWidth - element.clientWidth;
} 

Please note that this will not work on body therefore you need to use the method from the blog post.

Hope that helps, cheers!

Really elegant solution (which actually works!). Why (on earth) are there so many solutions which create a div

I have been searching for a solution to my site for days! Thank you so much!

Thanks a lot! I’ve now implemented it like this:

function getScrollbarWidth(elm) {
  if (elm === document.body) {
    return window.innerWidth - document.documentElement.clientWidth;
  } else {
    return elm.offsetWidth - elm.clientWidth;
  }
}