首頁 >web前端 >js教程 >如果使用 JavaScript 頁面底部可見，如何傳回 true？

如果使用 JavaScript 頁面底部可見，如何傳回 true？

WBOY轉載: 2023-08-24 19:25:10792瀏覽

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

在本教學中，我們將檢查頁面的底部是否對使用者可見。我們可以透過使用視窗的高度和滾動視窗的高度來實現此功能。要編寫此程式碼，我們需要了解 JavaScript 的三種方法，如下所示：

scrollY - 它是視窗的唯讀屬性，並傳回文件具有的像素垂直捲動。

window.scrollY

scrollHeight -它是一個 HTML DOM 元素，也是視窗的唯讀屬性。它會傳回元素內容的高度，包括不可見的內容。

element.scrollHeight

clientHeight - 它也是唯讀屬性，傳回元素的可視高度（以像素為單位），包括填充，但不包括邊框、捲軸或邊距。

element.clientHeight
window.clientHeight

注意 - 上述三種方法皆以像素為單位測量元素的值。

語法

以下是要檢查的條件的語法如果頁面底部可見。

document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight ||document.documentElement.clientHeight);

如果上述條件成立，頁面底部將可見。

方法

我們檢查 clientHeight 和 scrollY 大於或等於 scrollHeight 或 clientHeight。如果此條件為真，則頁面底部將可見。因此，我們定義一個函數，如果滿足條件，則傳回 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>

在上面的程式碼中，我們比較兩個值，一個是客戶端高度和scrollY之和，另一個是滾動高度和客戶端高度的或運算。當客戶端高度與scrollY總和大於或等於滾動高度與客戶端高度的或運算時，結果值為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 的下邊距設定得很高，以便頁面底部不可見。

<html>
<head>
   <title>Example - Bottom Visible JavaScript</title>
</head>
   <body>
   <div style="margin-bottom:2500px;">
      <h3>The bottom of page not visible</h3>
      <p id = "bottom"> Is bottom of the Page visible?<br></p>
      <p id> <br> Please scroll down to reach the bottom...</p>
   </div>
   <div> You reached to the bottom of the page.</div>
   <script>
      const bottomVisible = () =>
      window.clientHeight + window.scrollY >=(document.documentElement.scrollHeight || window.clientHeight);
      console.log(bottomVisible());
      document.getElementById("bottom").innerHTML += bottomVisible()
   </script>
</body>
</html>

以上是如果使用 JavaScript 頁面底部可見，如何傳回 true？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html 接口 dom

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何從 JavaScript 陣列中刪除假值？下一篇：如何從 JavaScript 陣列中刪除假值？

看更多