Scrollbar width

Angelos Chalaris · JavaScript, Browser · Jul 16, 2022

Calculates the width of the window's vertical scrollbar.

• Use Window.innerWidth to get the interior width of the window.
• Use Element.clientWidth to get the inner width of the Document element.
• Subtract the two values to get the width of the vertical scrollbar.

const getScrollbarWidth = () =>
  window.innerWidth - document.documentElement.clientWidth;

getScrollbarWidth(); // 15

Recommended snippets

• Get elements bigger than viewport

  JavaScript, Browser

  Returns an array of HTML elements whose width is larger than that of the viewport's.

• Smooth scroll element into view

  JavaScript, Browser

  Smoothly scrolls the element on which it's called into the visible area of the browser window.

• Vertical offset of element

  JavaScript, Browser

  Finds the distance from a given element to the top of the document.