ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してページの下部が表示されている場合にtrueを返すにはどうすればよいですか?
JavaScriptを使用してページの下部が表示されている場合にtrueを返すにはどうすればよいですか?
- WBOY転載
- 2023-08-24 19:25:10786ブラウズ
このチュートリアルでは、ページの下部がユーザーに表示されているかどうかを確認します。これは、window の height と scrolling ウィンドウの高さを使用することで実現できます。このコードを記述するには、次の 3 つの JavaScript メソッドを知っている必要があります。
scrollY - これはウィンドウの読み取り専用プロパティであり、ドキュメントの垂直方向のピクセル数を返します。スクロール。
window.scrollY
scrollHeight -これは HTML DOM 要素であり、ウィンドウの読み取り専用プロパティです。非表示のコンテンツを含む要素のコンテンツの高さを返します。
element.scrollHeight
clientHeight - これは読み取り専用プロパティでもあり、要素の視覚的な高さをピクセル単位で返します。これにはパディングは含まれますが、境界線、スクロールバー、またはマージンは含まれません。
element.clientHeight window.clientHeight
Note - 上記の 3 つの方法はすべて、要素の値をピクセル単位で測定します。
構文
次は、ページの下部が表示されている場合にチェックされる条件の構文です。
document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight ||document.documentElement.clientHeight);
上記の条件が当てはまる場合、ページの下部が表示されます。
メソッド
clientHeight と scrollY が scrollHeight または clientHeight# 以上であることを確認します。 ##。この条件が true の場合、ページの下部が表示されます。したがって、条件が満たされた場合に true を返す関数を定義します。
例documentElementのclientHeightプロパティを使用する
次のプログラムでは、ページの下部が表示されるかどうかを確認します。 documentElement の clientHeight プロパティを使用して、構文セクションで定義された条件を確認します。
<!DOCTYPE html>
<html>
<head>
<title>Example - Bottom Visible JavaScript</title>
</head>
<body>
<div style="margin-bottom:100px;">
<h3>Checking if bottom of page is visible</h3>
<p id = "bottom"> Is bottom of the Page visible?<br></p>
</div>
<div> You reached to the bottom of the page.</div>
<script>
const bottomVisible = () =>
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight ||
document.documentElement.clientHeight);
console.log(bottomVisible());
document.getElementById("bottom").innerHTML += bottomVisible()
</script>
</body>
</html>上記のコードでは、2 つの値を比較します。1 つはクライアントの高さとスクロール Y の合計で、もう 1 つはスクロールの高さとクライアントの高さの OR 演算です。クライアントの高さとscrollYの合計がスクロールの高さとクライアントの高さのOR演算以上の場合、結果の値はtrueとなり、ページの下部が表示されていることを示します。
例
window インターフェイスの clientHeight プロパティの使用
次のプログラムでは、ページの下部が表示されているかどうかを確認します。 window インターフェイスの clientHeight プロパティを使用して、構文セクションで定義された条件を確認します。
<!DOCTYPE html>
<html>
<head>
<title>Example - Bottom Visible JavaScript</title>
</head>
<body>
<div style="margin-bottom:100px;">
<h3>Checking if bottom of page is visible</h3>
<p id = "bottom"> Is bottom of the Page visible?<br></p>
</div>
<div> You reached to the bottom of the page.</div>
<script>
const bottomVisible = () =>
window.innerHeight + window.scrollY >=(document.documentElement.scrollHeight || window.innerHeight);
console.log(bottomVisible());
document.getElementById("bottom").innerHTML += bottomVisible()
</script>
</body>
</html>例
ページの下部が表示されません
次のプログラムでは、div の下マージンを非常に高く設定しています。ページの下部が非表示になっていること。
えええええ以上がJavaScriptを使用してページの下部が表示されている場合にtrueを返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。