I want to know if an element is currently visible in the viewport , i.e. in the browser viewport, using JavaScript/jQuery.
From this other question , I know that with .is(':visible')
I can find out if that element is visible or not, but that does not mean that it is inside the display window (and therefore invisible to the user), which is what I want.
For example: The following code checks if an element is visible when the button is clicked; but if we scroll, go down to the bottom of the page and press the button again, it keeps telling us that it is, even though the user can no longer see it.
$("button").on("click", function() {
alert($("#holamundo").is(":visible"));
});
button {
position:fixed;
top:5px;
right:5px;
}
p {
margin-top: 800px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>¿Está "Hola Mundo" visible?</button>
<div id="holamundo">Hola Mundo</div>
<p>.</p>
<p>.</p>
Is there any proper function or how would it be done in JavaScript/jQuery to detect if an element is visible AND in the viewport?
We could validate this by first accessing the values of the "display window", for this we use the object 's scrollTop
window
to know when it scrolled down and the limit is obtained from the sum of the value returned byscrollTop
+height
of the windowThen we would have to carry out the same procedure for the
elemento
, for this we will use offset for the coordinates and access the propertytop
to then obtain the height of the element also with heightWith these values we would validate by comparing , the function would look like this:
update
As a recommendation from @Alvaro Montoro , with the previous example it would work but height will not take into account
padding
as outerheight does.Example using only
JavaScript
update
Another option would be to use the IntersectionObserver() API to find out if the element is visible or not.
Create the options object with three values
root
, this property determines the element where the visibility of the element to be observed will be validated, by default it takes the browser viewportrootMargin
, this property determines the margin that will be included in the visibility evaluationthreshold
, this property determines the percentage of visibility that you want to observe, the default value is 0, that is, as soon as it is visible (1px minimum), and 1 when the element is completely visible. This property can be passed more than 1 parameter, check the documentation. :)Create the instance of
IntersectionObserver
, as the first parameter a callback and as the second parameter the options objectAssign the observer to the element(s) to be evaluated. For the example only one with the id
holamundo
Within the callback it will have the entries parameter that will refer to the observed elements, (in the example the element would be the index 0) , through
isIntersecting
we verify if it is visible taking into account the options, from that we can carry out actions as the case may be .I made an npm module (available on the jsdelivr cdn ) called scroll-utility that adds many facilities for working with scrolling, including knowing if an element is visible inside another or in the window.
It's dependency-free, so it doesn't need jQuery to work.