offsetWidthStackOverflow には/ clientWidth/ scrollWidth(それぞれおよび)に関する質問がいくつかあります-Heightが、それらの値が何であるかを包括的に説明しているものはありません。
また、ウェブ上には混乱を招く情報や誤った情報を提供する情報源がいくつかあります。
視覚的なヒントを含めた完全な説明をいただけますか? また、これらの値を使用してスクロール バーの幅を計算するにはどうすればよいですか?
ベストアンサー1
CSS ボックス モデルは、特にスクロール コンテンツに関してはかなり複雑です。ブラウザーは CSS の値を使用してボックスを描画しますが、CSS しかない場合、JS を使用してすべての寸法を決定するのは簡単ではありません。
そのため、各要素には、利便性のために、、、、、の 6 つの DOM プロパティがあります。これらは、offsetWidth現在offsetHeightの視覚的なレイアウトを表す読み取り専用属性であり、すべて整数です(したがって、丸め誤差の影響を受ける可能性があります)。clientWidthclientHeightscrollWidthscrollHeight
詳細に見ていきましょう。
offsetWidth,offsetHeight: すべての境界線を含むビジュアルボックスのサイズ。要素にwidth/とパディングと境界線がある場合は、それらを加算して計算できます。heightdisplay: blockclientWidth,clientHeight: ボックスコンテンツの視覚的な部分。境界線やスクロールバーは含まれませんが、パディングは含まれます。CSS から直接計算することはできず、システムのスクロールバーのサイズに依存します。scrollWidth,scrollHeight: スクロール領域の外側で現在隠れている部分を含む、ボックスのコンテンツ全体のサイズ。CSS から直接計算することはできず、コンテンツによって異なります。
やってみて：jsFiddle
スクロールバーの幅が考慮されるためoffsetWidth、次の式でスクロールバーの幅を計算できます。
scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth
offsetWidth残念ながら、と はclientWidth常に整数であるのに対し、ズーム レベルが 1 以外の場合は実際のサイズが小数になる可能性があるため、丸め誤差が発生する可能性があります。
この
scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth
Chrome ではスクロールバーがすでに減算された状態で返されるため、確実に動作しませんwidth。(また、Chrome ではスクロール コンテンツの下部に paddingBottom がレンダリングされますが、他のブラウザではそうではありません)