Maison >interface Web >js tutoriel >Comment renvoyer true si le bas de la page est visible en utilisant JavaScript ?

Comment renvoyer true si le bas de la page est visible en utilisant JavaScript ?

WBOYavant: 2023-08-24 19:25:10792parcourir

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

Dans ce tutoriel nous vérifierons si le bas de la page est visible par l'utilisateur. Nous pouvons y parvenir en utilisant la hauteur de la fenêtre et la hauteur de la défilementfenêtre. Pour écrire ce code, nous devons connaître trois méthodes JavaScript comme suit :

scrollY - C'est une propriété en lecture seule de la fenêtre et renvoie le nombre de pixels du document pour le défilement vertical.

window.scrollY

scrollHeight -C'est un élément HTML DOM et une propriété en lecture seule de la fenêtre. Il renvoie la hauteur du contenu de l'élément, y compris le contenu invisible.

element.scrollHeight

clientHeight - Il s'agit également d'une propriété en lecture seule qui renvoie la hauteur visuelle de l'élément en pixels, y compris le remplissage, mais pas les bordures, les barres de défilement ou les marges.

element.clientHeight
window.clientHeight

Remarque - Les trois méthodes ci-dessus mesurent la valeur d'un élément en pixels.

Syntaxe

Voici la syntaxe de la condition à vérifier si elle est visible en bas de page.

document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight ||document.documentElement.clientHeight);

Si les conditions ci-dessus sont vraies, le bas de la page sera visible.

Méthodes

Nous vérifions que clientHeight et scrollY sont supérieurs ou égaux à scrollHeight ou clientHeight. Si cette condition est vraie, le bas de la page sera visible. Par conséquent, nous définissons une fonction qui renvoie vrai si la condition est remplie.

Exemple

Utilisation de la propriété clientHeight de documentElement>

Dans le programme ci-dessous, on vérifie si le bas de la page est visible. Nous utilisons la propriété clientHeight de documentElement pour vérifier les conditions définies dans la section syntaxe.

<!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>

Dans le code ci-dessus, nous comparons deux valeurs, l'une est la somme de la hauteur du client et du scrollY, et l'autre est l'opération OU de la hauteur de défilement et de la hauteur du client. Lorsque la somme de la hauteur du client et de scrollY est supérieure ou égale à l'opération OU de la hauteur de défilement et de la hauteur du client, la valeur du résultat est vraie, indiquant que le bas de la page est visible.

Exemple

Utilisation de la propriété clientHeight de l'interface window

Dans le programme ci-dessous, on vérifie si le bas de la page est visible ou non. Nous utilisons la propriété clientHeight de l'interface window pour vérifier les conditions définies dans la section syntaxe.

<!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>

Exemple

Le bas de la page n'est pas visible

Dans le programme ci-dessous, nous définissons la marge inférieure du div à un niveau élevé afin que le bas de la page ne soit pas visible.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 接口 dom

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment supprimer les fausses valeurs du tableau JavaScript ?Article suivant：Comment supprimer les fausses valeurs du tableau JavaScript ?

Articles Liés

Voir plus