Heim >Web-Frontend >js-Tutorial >Wie kann ich mit JavaScript „true' zurückgeben, wenn das Ende der Seite sichtbar ist?
In diesem Tutorial prüfen wir, ob der untere Rand der Seite für den Benutzer sichtbar ist. Dies können wir erreichen, indem wir die Höhe des Fensters und die Höhe des Bildlauffenstersverwenden. Um diesen Code zu schreiben, müssen wir die folgenden drei Methoden von JavaScript kennen:
scrollY – Es handelt sich um eine schreibgeschützte Eigenschaft des Fensters und gibt die Anzahl der Pixel zurück, die das Dokument für vertikales Scrollen hat.
window.scrollY
scrollHeight -Es ist ein HTML-DOM-Element und eine schreibgeschützte Eigenschaft des Fensters. Es gibt die Höhe des Elementinhalts zurück, einschließlich unsichtbarer Inhalte.
element.scrollHeight
clientHeight – Dies ist auch eine schreibgeschützte Eigenschaft, die die visuelle Höhe des Elements in Pixel zurückgibt, einschließlich Innenabstand, jedoch nicht Rahmen, Bildlaufleisten oder Ränder.
element.clientHeight window.clientHeight
Hinweis – Alle drei oben genannten Methoden messen den Wert eines Elements in Pixeln.
Das Folgende ist die Syntax der zu prüfenden Bedingung, wenn sie unten auf der Seite sichtbar ist.
document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight ||document.documentElement.clientHeight);
Wenn die oben genannten Bedingungen zutreffen, wird der untere Rand der Seite sichtbar sein.
Wir prüfen, ob clientHeight und scrollY größer oder gleich scrollHeight oder clientHeight sind. Wenn diese Bedingung erfüllt ist, ist der untere Rand der Seite sichtbar. Daher definieren wir eine Funktion, die „true“ zurückgibt, wenn die Bedingung erfüllt ist.
Verwendung der clientHeight-Eigenschaft von documentElement>
Im folgenden Programm prüfen wir, ob der untere Rand der Seite sichtbar ist. Wir verwenden die Eigenschaft clientHeight von documentElement, um die im Syntaxabschnitt definierten Bedingungen zu überprüfen.
<!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>
Im obigen Code vergleichen wir zwei Werte, einer ist die Summe aus Client-Höhe und ScrollY und der andere ist die ODER-Verknüpfung von Scroll-Höhe und Client-Höhe. Wenn die Summe aus Client-Höhe und scrollY größer oder gleich der ODER-Verknüpfung der Scroll-Höhe und der Client-Höhe ist, ist der Ergebniswert wahr und gibt an, dass der untere Rand der Seite sichtbar ist.
Verwendung der clientHeightEigenschaft der windowSchnittstelle
Im Programm unten prüfen wir, ob der untere Rand der Seite sichtbar ist oder nicht. Wir verwenden die Eigenschaft clientHeight der Schnittstelle window, um die im Syntaxabschnitt definierten Bedingungen zu überprüfen.
<!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>
Der untere Rand der Seite ist nicht sichtbar
Im Programm unten legen wir den unteren Rand des Div hoch, sodass der untere Rand der Seite nicht sichtbar ist.
<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>
Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript „true' zurückgeben, wenn das Ende der Seite sichtbar ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!