MENU

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の関数を使用して取得する方法です。