It can be handy to know the width of the scrollbar. A frequent example can be a modal. In a case of a modal, we usually want to disable the outside scroll on the body element. For this, we add overflow: hidden; to the body, the scrollbar will disappear, and our content will shift into its place.

Get the Width of the Browser Scrollbar

This shift is annoying, and one way to avoid it to add an offset (when the overflow hidden is present) to the right side of theelement. For this, we must get the current width of the scrollbar. If you want to get the browser’s scrollbar width, you can use the following:

function getBrwoserScrollbarWidth() {
  return window.innerWidth - document.documentElement.clientWidth;
}

With the window.innerWidth, we will get the width of the browser. Width the document.documentElement.clientWidth we will get the width of our document (without the scrollbar). If we subtract them from each other, we will get the scrollbar width.

Get the Width of the Scrollbar on Any Element

We can also measure the scrollbar width on any element with a slightly modification. Insted of using the window object we need to get the element.offsetWidth:

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

getElementScrollbarWidth(document.querySelector('.custom-element'));

Looking for web dev job?
You can check them on Jooble.

To see and write comments, you must allow the related (Disqus) cookies. For more information, please visit our privacy policy page.

Need a reliable, small web developer team? Try us! We develop with Laravel and Vue.js.