JavaScriptを使用してページの下部が表示されている場合にtrueを返すにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptを使用してページの下部が表示されている場合にtrueを返すにはどうすればよいですか?

WBOY

リリース： 2023-08-24 19:25:10

転載

792 人が閲覧しました

如果使用 JavaScript 页面底部可见，如何返回 true？

このチュートリアルでは、ページの下部がユーザーに表示されているかどうかを確認します。これは、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 と < em>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>

ログイン後にコピー