CSS/jQueryでのブラウザのスクロールバーの幅を取得する

スクロールバーの幅を取得する方法を紹介します。最近ではスクロールバーの幅を扱う必要性がなくなってきたのであまり使う機会はありませんがメモしておきます。

CSS

calc(100vw - 100%);

CSSではこれでスクロールバー分の幅が取得できます。

実際には

$('
').css(
{
  'width': 'calc(100vw - 100%)'
})
.appendTo('body');

var scroll_bar = $('.scrollbar').css('width');

$('.scrollbar').remove();

console.log(scroll_bar);

実際にはCSSで取得しても使い道がないので、JSで間接的に取りに行きます。

jQuery

var scroll_bar = window.innerWidth - $(window).width();
console.log(scroll_bar);

JS/jQueryの関数を使用して取得する方法です。