在本教學中，我們將檢查頁面的底部是否對使用者可見。我們可以透過使用視窗的高度和滾動視窗的高度來實現此功能。要編寫此程式碼，我們需要了解 JavaScript 的三種方法，如下所示：
scrollY - 它是視窗的唯讀屬性，並傳回文件具有的像素垂直捲動。
scrollHeight -它是一個 HTML DOM 元素，也是視窗的唯讀屬性。它會傳回元素內容的高度，包括不可見的內容。
element.scrollHeight
登入後複製
clientHeight - 它也是唯讀屬性，傳回元素的可視高度（以像素為單位），包括填充，但不包括邊框、捲軸或邊距。
element.clientHeight
window.clientHeight
登入後複製
注意 - 上述三種方法皆以像素為單位測量元素的值。
語法
以下是要檢查的條件的語法如果頁面底部可見。
document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight ||document.documentElement.clientHeight);
登入後複製
如果上述條件成立，頁面底部將可見。
方法
我們檢查 clientHeight 和 < em>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中文網其他相關文章！
