レッスンに戻る

スクロールバーの幅は?

重要度: 3

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

Windows の場合、通常は 12px20px の間で変動します。ブラウザがそれ用にスペースを確保していない場合(スクロールバーはテキストの上で半分半透明になり、これも発生します)、0px になる可能性があります。

追伸 コードはすべての HTML ドキュメントで機能する必要があり、コンテンツに依存しないようにします。

スクロールバーの幅を取得するには、スクロールがあるが、境界線やパディングのない要素を作成できます。

その後、その全幅 offsetWidth と内側コンテンツエリアの幅 clientWidth の差がスクロールバーになります。

// create a div with the scroll
let div = document.createElement('div');

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

// must put it in the document, otherwise sizes will be 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);