# CSSやJavaScriptでスクロールバーの横幅を取得する方法

URL: https://webrandum.net/css-javascript-get-scrollbar-width/
公開日: 2022-05-10
更新日: 2022-05-10
カテゴリー: コーディング
タグ: CSS, JavaScript
出典: Webrandum（著者: サイトウ マサカズ）

コーディングをしていて、スクロールバー自体の横幅を取得したいときがあったので、取得方法についてまとめておきます。

## macOSで常にスクロールバーが表示されるようにする

macOSでは設定によってはスクロールバーが表示されないこともあります。

［システム環境設定］→［一般］の「スクロールバーの表示」で変更できます。

![［システム環境設定］→［一般］の「スクロールバーの表示」](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_1-2.png)

## スクロールバーの幅を取得する

### 1. CSSで取得する方法

スクロールバーが表示されている場所がページ全体に対しての場合は、下記の記述で取得できます。

```
calc(100vw - 100%);
```

`100vw`はビューポートの横幅全体が取れるのでスクロールバーを含む横幅、`100%`は`body`タグの横幅`100%`が取得できるのでスクロールバーを含まない横幅が取得できます。

それらの差を`calc`で計算して取ることでスクロールバーの取得ができます。

`100vw`はビューポートの横幅になるので、ページ全体に対してのスクロールバーに対してのみしか使用できません。

### 2. JavaScriptのinnerWidthとclientWidthで取得する方法

JavaScriptを使う方法もあり、下記のようにinnerWidthとclientWidthの差を取得するだけです。

```
let scrollbarWidth = window.innerWidth - document.body.clientWidth;
console.log(scrollbarWidth);
```

### 3. JavaScriptのoffsetWidthとclientWidthで取得する方法

例えば、テーブルのスクロールバーなど、ページ全体ではなく特定要素に対してのスクロールバーの横幅を取得したい場合は下記の特定要素のclientWidthとoffsetWidthの差を取得します。

```
let table = document.querySelectorAll('.table_scroll .table_main');
if(table[0]){
  let clientWidth = table[0].clientWidth;
  let offsetWidth = table[0].offsetWidth;
  let scrollbarWidth = offsetWidth - clientWidth;
  console.log(scrollbarWidth);
}
```

スクロールバーの幅を取得したいことはあまりありませんが、簡単に取得できますし、ページ全体であればCSSだけでも可能なので「こういう方法がある」と覚えておくと役に立ちそうです。