# How to get the scrollbar width of an element using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Aug 14, 2020, updated Oct 7, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-dom-get-the-scrollbar-width-of-an-element

> Learn how to get the scrollbar width of an element by using JavaScript.

To get the scrollbar width of an HTML element, you can use the `offsetWidth` and `clientWidth` property of the element.

The `offsetWidth` returns the width of the element in pixels, including the scrollbar. On the other hand, the `clientWidth` property returns the width of the element without scrollbar.

All you need to do is carry a simple calculation to get the actual scrollbar width:

```javascript
const div = document.querySelector('.pizza')

const scrollbarWidth = div.offsetWidth - div.clientWidth
```

To get the scrollbar width of the document, you can use the following code:

```javascript
const scrollbarWidth = document.body.offsetWidth - document.body.clientWidth
```