How to return true if bottom of page is visible using JavaScript?-JS Tutorial-php.cn

How to return true if bottom of page is visible using JavaScript?

WBOY

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

forward

762 people have browsed it

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

In this tutorial we will check if the bottom of the page is visible to the user. We can achieve this by using the height of the window and the height of the scrollingwindow. To write this code we need to know three methods of JavaScript as follows:

scrollY - It is a read-only property of the window and returns the number of pixels the document has for vertical scrolling.

window.scrollY

Copy after login

scrollHeight -It is an HTML DOM element and a read-only property of the window. It returns the height of the element's content, including invisible content.

element.scrollHeight

Copy after login

clientHeight - This is also a read-only property that returns the visual height of the element in pixels, including padding, but not borders, scrollbars, or margins.

element.clientHeight
window.clientHeight

Copy after login

Note - All three methods above measure the value of an element in pixels.

Syntax

The following is the syntax for the condition to be checked if the bottom of the page is visible.

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

Copy after login

If the above conditions are true, the bottom of the page will be visible.

Method

We check that clientHeight and < em>scrollY are greater than or equal to scrollHeight or clientHeight. If this condition is true, the bottom of the page will be visible. Therefore, we define a function that returns true if the condition is met.

Example

Using the clientHeight property of documentElement>

In the following program, we Check if the bottom of the page is visible. We use the clientHeight property of documentElement to check the conditions defined in the syntax section.

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

Copy after login

In the above code, we compare two values, one is the sum of client height and scrollY, and the other is the OR operation of scroll height and client height. When the sum of the client height and scrollY is greater than or equal to the OR operation of the scroll height and the client height, the result value is true, indicating that the bottom of the page is visible.

Example

Using the clientHeight property of the window interface

In the following program, we Check if the bottom of the page is visible or not. We use the clientHeight property of the window interface to check the conditions defined in the syntax section.

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

Copy after login

Example

The bottom of the page is not visible

In the following program, we set the bottom margin of the div very high so that the bottom of the page Invisible.

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

Copy after login

The above is the detailed content of How to return true if bottom of page is visible using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!