レッスンに戻る

スクロールバーの幅は何でしょう?

重要性: 3

標準のスクロールバーの幅を返すコードを書いてください。

Windowsでは、通常 12px20px の間で変化します。もしブラウザがスクロールバーのためのスペースを予約していない場合は、0px の可能性があります。

P.S. コードは任意のHTMLドキュメントで動作すべきで、コンテンツには依存しません。

スクロールバーの幅を取得するために、私たちはスクロールを持つがボーダーとパディングは含まない要素を作成することができます。

そして、その全幅 offsetWidth と内部コンテンツ領域幅 clientWidth の間の違いは、スクロールバーになります:

// スクロールを持つ div を作成します
let div = document.createElement('div');

div.style.overflowY = 'scroll';
div.style.width = '50px';
div.style.height = '50px';

// ドキュメントに置く必要があります、さもないとサイズは 0 です
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);