JavaScript - スクロール バーと clientHeight について

Question

スクロールバーの小悪魔が本当にうっとうしいです。スクロールバーがどこにあるのかというと、こんなブログを見つけました。実践した結果によると、次のような感じです。

スクロール バーはコンテンツの位置を占めますが、コンテンツの横に表示されます。 (実際の効果では、境界線の横、境界線の内側に表示されます)

js には clientHeight があり、MDN の定義は次のとおりです。

Element.clientWidth プロパティは、要素の内部幅をピクセル単位で表します。このプロパティにはパディングが含まれますが、垂直スクロールバー (存在する場合)、境界線、またはマージンは含まれません。

この属性は便利です。たとえば、ピンクの p があり、幅と高さは 100 ピクセル、padding-right は 20 ピクセル (青い部分)、clientWidth は内部幅 83 ピクセル (100-17、17 はスクロール バー) width) plus、padding-right の 20px は 103px に等しい これは何に使うのですか? ！真ん中に電球があるスクロール バーを削除するという問題は何ですか?

この属性には実用的な用途がありますか?このメソッドを使用してビューポートの幅と高さを取得するのは非常に信頼性が低いと思いますが、JS エレベーションでページのビューポート サイズを取得するのに body.clientWidth を使用するのはなぜですか?

PS、スクロール バーに関する標準的な公式機能の説明はありますか?

Answer 1

1. ブラウザウィンドウ

リーリー リーリー

このとき、このようにして取得したbodyタグの幅はビューポートサイズではありません

リーリー

上記は、垂直スクロールバーの幅（通常は17）を除いたブラウザウィンドウの幅であり、ブラウザの外枠は含まれません。

リーリー

これは、垂直スクロール バーがない場合、ブラウザ ウィンドウの表示領域の幅です。垂直スクロール バーがある場合は、垂直スクロール バーを含みます。幅 (通常は 17)。

したがって、垂直スクロールバーの幅を取得したい場合は、次のようにすることができます:

リーリー

2番目、特定のp要素内
html

リーリー

CSS

リーリー

js

リーリー

p の実際の幅と高さを取得したい場合は、スクロール バーがあるかどうかに関係なく、offsetWidth、offsetHeight を使用する必要があります
そして clientWidth を使用して垂直スクロール バーの実際の幅を計算できます (場合によっては垂直スクロールバーの幅は自動的に定義され、デフォルトではありません17)