Add scrollbar width snippet

thomas-ayissi · Jul 16, 2022 · 82a94e1 · 82a94e1
1 parent dac3814
commit 82a94e1
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/snippets/getScrollbarWidth.md 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
+```