在本教學中,我們將檢查頁面的底部是否對使用者可見。我們可以透過使用視窗的高度和滾動視窗的高度來實現此功能。要編寫此程式碼,我們需要了解 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中文網其他相關文章!