Wie kann ich mit JavaScript „true' zurückgeben, wenn das Ende der Seite sichtbar ist?-js-Tutorial-php.cn

Wie kann ich mit JavaScript „true' zurückgeben, wenn das Ende der Seite sichtbar ist?

WBOY

Freigeben： 2023-08-24 19:25:10

nach vorne

763 Leute haben es durchsucht

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Hinweis – Alle drei oben genannten Methoden messen den Wert eines Elements in Pixeln.

Syntax

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);

Nach dem Login kopieren

Wenn die oben genannten Bedingungen zutreffen, wird der untere Rand der Seite sichtbar sein.

Methoden

Wir prüfen, ob clientHeight und < em>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.

Beispiel

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>

Nach dem Login kopieren

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.

Beispiel

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>

Nach dem Login kopieren

Beispiel

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>

Nach dem Login kopieren

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!