私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
購入するEPUB/PDF
チュートリアルマップ
レッスンに戻る

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

重要性: 3
See More

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

Windowsでは、通常 12px と 20px の間で変化します。もしブラウザがスクロールバーのためのスペースを予約していない場合は、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);