- 1. 概要
- 2. コンテンツの高さを取得
- 3. 参考サイト
1. 概要
本サイトのコンテンツは、ちいさい画面でない限り、横スクロールすることは、滅多にありません。
縦スクロールは、そのコンテンツの内容によってまちまちなのですが、ウィンドウの縦幅を超える場合、縦スクロールがブラウザに表示されるようになっています。
知りたかったのは、スクロール分も含めた、そのコンテンツの縦幅だったのです。
2. コンテンツの高さを取得
縦スクロール幅を含めた、コンテンツの高さを求めるには。
document.documentElement.scrollHeight
という変数を使います。
ただし、これ、注意が必要なのは、ブラウザがコンテンツを読み込んだ後に動作しないと、意味がありません。
当初、なんの考えもなしに、「<head></head>」内や、「<body>」の直後にスクリプトを書いていたら。
スクロールバーが表示されているものも、表示されていないものも、同じウィンドウ縦幅になってて、「なんじゃこら？」と思ったら。
コンテンツを読み込んだ後でないと、スクロール幅まで計算されないのでした。
「</body>」の直前にいれたら、うまくいきました。
間違いないのは、読み込んだよというイベントで発火させることです。
本ページのソースを読めばわかるのですが。
「<body>」直後に、下記のスクリプトを記述しています。
window.onload = function()
{
const mySpanElement = document.getElementById('height');
mySpanElement.textContent = " " + document.documentElement.scrollHeight + " ";
};
この処理の結果、下記の表示になっているわけです。
このページの縦幅は
3. 参考サイト
本ページは、「Gemini」伍長および「ChatGPT」軍曹を参考にさせていただきました。
|
|
