ビューポートの幅、高さ、スクロールの高さ_html/css_WEB-ITnose

多くのシナリオでは、JavaScript でウィンドウまたは DOM 要素の幅、高さ、スクロール高さを取得する必要があります。 例: スクロール効果の実装、全画面レイアウトの作成、動的な絶対位置など。 この記事では、関連する DOM API: window.innerHeight、window.outerHeight、clientHeight、offsetHeight、scrollHeight、scrollTop などを紹介します (もちろん、各属性には対応する幅があります)。

ウィンドウ全体のサイズ

innerHeight および externalHeight

ウィンドウ全体の高さは、window.innerHeight および window.outerHeight を通じて取得できます。ここで:

• innerHeight は、スクロール バーを含む DOM ビューポートのサイズです。
• externalHeight は、ウィンドウ タイトル、ツールバー、ステータス バーなどを含むブラウザ ウィンドウ全体のサイズです。

高さを幅に変更することも機能します (それぞれ innerWidth と externalWidth)。

注: IE8 以下では、このセクションで紹介する window.innerHeight などのプロパティはサポートされていません。

clientHeight

window.innerHeight をサポートしていないブラウザでは、documentElement と body のサイズを読み取ることができます。それらのサイズは window.innerHeight と同じです (実際にはまったく同じではありません)。 、次のセクションを参照してください)。

document.documentElement.clientHeightdocument.body.clientHeight

ここで、documentElement はドキュメントのルート要素、つまり 100db36a723c770d327fc0aef2ce13b1 タグです。

Document.documentElement 読み取り専用プロパティは、ドキュメントのルート要素である Element (たとえば、HTML ドキュメントの 100db36a723c770d327fc0aef2ce13b1 要素) を返します – MDN

body は、名前が示すように、6c04bd5ca3fcae76e30b72ad730ca86d タグです。この2つの方法は互換性が良くIE6まで対応可能ですが、書くのが難しいです。

ベスト プラクティス

ウィンドウ サイズの取得にはブラウザの互換性の問題があるため、実際には、通常、すべてのブラウザと互換性を持たせるために次のコードが使用されます。

var height = window.innerHeight    || document.documentElement.clientHeight    || document.body.clientHeight;

実際、後者の 2 つのメソッドで取得される高さは window.innerHeight とは異なります。これら 3 つの属性の値は 1 つずつ小さくなります。 具体的には、window.innerHeight には DOM 全体 (コンテンツ、境界線、スクロールバー) が含まれます。

documentElement.clientHeight にはドキュメント全体のスクロール バーは含まれませんが、100db36a723c770d327fc0aef2ce13b1 要素の境界線は含まれます。
body.clientHeight には、ドキュメント全体のスクロール バー、100db36a723c770d327fc0aef2ce13b1 要素の境界線、および 6c04bd5ca3fcae76e30b72ad730ca86d の境界線とスクロール バーは含まれません。

実際、clientHeight よりも offsetHeight を使用する方が優れています。詳細については、以下を参照してください。

スクロールの高さ

JavaScript を使用してページのスクロール (先頭に戻るなど) を制御する場合、ページの現在スクロール先とスクロール ターゲットがどこにあるかを知る必要があります。 。 これはスクロールの高さです。これには、clientHeight、offsetHeight、scrollHeight、scrollTop の 4 つの DOM プロパティが関係します。

すべての DOM 要素には上記の 4 つの属性があります。固定サイズを指定し、それを表示するには overflow:scroll を設定するだけです。

• clientHeight: 内部の可視領域のサイズ。

  要素の内部の高さをピクセル単位で返します。これにはパディングは含まれますが、水平スクロールバーの高さ、境界線、マージンは含まれません

• offsetHeight :全体 境界線とスクロールバーを含む視覚領域のサイズ。

  は、要素の境界線、要素の垂直パディング、要素の水平スクロールバー (存在する場合、レンダリングされる場合)、および要素の CSS 高さを含む測定値です。

• scrollHeight: オーバーフローを含む要素のコンテンツの高さ。

  は、オーバーフローにより画面に表示されないコンテンツを含む要素のコンテンツの高さの測定値です

• スクロールトップ: 要素のコンテンツは上にスクロールしますピクセル数、またはスクロールがない場合は 0。

  要素のコンテンツが上にスクロールされるピクセル数。

以下に示すように:

対応する水平属性は、clientWidth、offsetWidth、scrollWidth、scrollLeft です。

参考資料

ウィンドウ - W3School: http://www.w3school.com.cn/js/js_window.asp
Window.innerHeight - MDN: https://developer.mozilla.org/en-CN/docs/Web/API/Window/innerHeight
Element.clientWidth - MDN: https://developer.mozilla.org/en- US/docs/Web/API/Element/clientHeight
Document.documentElement - MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement
Document.body - MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/body