diff --git a/snippets/getScrollbarWidth.md b/snippets/getScrollbarWidth.md new file mode 100644 index 000000000..c0a1754c3 --- /dev/null +++ b/snippets/getScrollbarWidth.md @@ -0,0 +1,24 @@ +--- +title: Scrollbar width +tags: browser +expertise: beginner +cover: blog_images/violin.jpg +author: chalarangelo +firstSeen: 2022-07-16T05:00:00-04:00 +--- + +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. + +```js +const getScrollbarWidth = () => + window.innerWidth - document.documentElement.clientWidth; +``` + +```js +getScrollbarWidth(); // 15 +```