Add scrollbar width snippet
This commit is contained in:
24
snippets/getScrollbarWidth.md
Normal file
24
snippets/getScrollbarWidth.md
Normal file
@ -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
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user