Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to return true if the bottom of the page is visible using JavaScript?
In this tutorial, we will check if the bottom part of a page is visible or not to the user. We can do this functionality by using the height of the window and the height of the scrolled window. To write this code we need to understand three methods of JavaScript which are given as:
scrollY ? It is the read-only property of the window, and returns the pixels a document has scrolled vertically.
window.scrollY
scrollHeight ? It is an HTML DOM element and a read-only property of the window. It returns the height of an element's content including the content that is not visible.
element.scrollHeight
clientHeight ? It is also the read-only property that returns the viewable height of an element in pixels, including padding, but not the border, scrollbar, or margin.
element.clientHeight window.clientHeight
Note ? All the above three methods measure the value of the element in pixels.
Syntax
Following is the syntax for the condition to check if bottom of the page is visible.
document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
If the above condition is true, the bottom of the page will be visible.
Approach
We check if sum of the clientHeight and scrollY is greater or equal to scrollHeight or clientHeight. If this condition is true the bottom of the page will be visible. Hence we define a function that returns true if the condition is met.
Example 1: Using clientHeight Property of documentElement
In the program below, we check if the bottom of the page is visible or not. We check the condition defined in the syntax section using clientHeight property of the documentElement.
<!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>
true
In the above code we are comparing two values: one is the sum of client height and scrollY and the other is the OR operation of scroll height and client height. The result value is true when the sum of client height and scrollY is greater than or equal to the scroll height or client height, which signifies that the bottom of the page is visible.
Example 2: Using clientHeight Property of window Interface
In the program below, we check if the bottom of the page is visible or not using the window.innerHeight property instead of document.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 = () =>
window.innerHeight + window.scrollY >=
(document.documentElement.scrollHeight || window.innerHeight);
console.log(bottomVisible());
document.getElementById("bottom").innerHTML += bottomVisible();
</script>
</body>
</html>
true
Example 3: When Bottom is Not Visible
In the program below, we set the bottom margin of the div so high that the bottom of the page is not visible initially.
<!DOCTYPE html>
<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><br>Please scroll down to reach the bottom...</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>
false
Comparison
| Method | Property Used | Use Case |
|---|---|---|
| documentElement.clientHeight | HTML element height | Standard DOM approach |
| window.innerHeight | Viewport height | Modern browser approach |
Conclusion
To detect if the bottom of a page is visible, compare the sum of viewport height and scroll position with the total document height. Use window.innerHeight for modern browsers or document.documentElement.clientHeight for broader compatibility.
2K+ Views
