Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
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>
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 value of result value is true when the sum of client height and scrollY is greater than or equal to the OR operation of the scroll height and client height which signifies that the bottom of the page is visible.
Example
Using clientHeight property of window interface
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 the clientHeight property of the window interface.
<!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>
Example
The bottom of the page 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.
<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>
1K+ Views
