資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 判斷頁面底部是否可見？
在本教程中，我們將檢查頁面的底部部分是否對使用者可見。我們可以透過使用**視窗**的高度和**滾動**視窗的高度來實現此功能。要編寫此程式碼，我們需要理解 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>在上面的程式碼中，我們比較兩個值，一個是 client height 和 scrollY 的和，另一個是 scroll height 和 client height 的或運算。當 client height 和 scrollY 的和大於或等於 scroll height 和 client height 的或運算時，result 值為 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>
1K+ 次檢視
