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

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

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

macOSでは設定によってはスクロールバーが表示されないこともあります。
［システム環境設定］→［一般］の「スクロールバーの表示」で変更できます。

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

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だけでも可能なので「こういう方法がある」と覚えておくと役に立ちそうです。