I'm loading elements via AJAX. Some of them are only visible if you scroll down the page. Is there any way I can know if an element is now in the visible part of the page?
This should do the trick:
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
Simple Utility Function This will allow you to call a utility function that accepts the element you're looking for and if you want the element to be fully in view or partially.
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
Usage
var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);
if (isElementInView) {
console.log('in view');
} else {
console.log('out of view');
}
-
58Note that this only works if the document is the element being scrolled, i.e. you aren't checking visibility of some element inside a scrolling inner pane. – Andrew B. Feb 12 '13 at 20:29
-
8
-
5
-
2For
elemTop
I used$(elem).position().top
and forelemBottom
I usedelemTop + $(elem).outerHeight(true)
. – Sarah Vessels Jan 26 '14 at 17:18 -
14For: "Any part of the element in view", I used: ((( elemTop >= docViewTop) && (elemTop <= docViewBottom)) || ((elemBottom >= docViewTop) && (elemBottom <= docViewBottom))) – Grizly Jul 29 '14 at 23:42
This answer in Vanilla:
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
// Only completely visible elements return true:
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
// Partially visible elements return true:
//isVisible = elemTop < window.innerHeight && elemBottom >= 0;
return isVisible;
}
-
29shouldn't this be
isVisible = elementTop < window.innerHeight && elementBottom >= 0
? Otherwise an element half on the screen returns false. – gman Feb 23 '15 at 21:08 -
10no. i check if some element is fully visible on the page. if you want to check visibility of some part - you can customise this snippet. – bravedick Feb 24 '15 at 8:45
-
16I find this answer to perform better than the chosen answer. Simpler too. – Adam Venezia Jul 15 '15 at 16:54
-
13In comparison to the approved answer, this performs waaaay much better with hundreds of elements. – ncla Feb 15 '16 at 0:05
-
5see a small fiddle demonstrating here - jsfiddle.net/shaaraddalvi/4rp09jL0 – upInCloud Apr 3 '17 at 10:25
Update: use IntersectionObserver
The best method I have found so far is the jQuery appear plugin. Works like a charm.
Mimics a custom "appear" event, which fires when an element scrolls into view or otherwise becomes visible to the user.
$('#foo').appear(function() { $(this).text('Hello world'); });
This plugin can be used to prevent unnecessary requests for content that's hidden or outside the viewable area.
-
32
-
5While the jQuery-appear plugin is good for content on the main page area, it unfortunately has issues with fixed size scrolling divs with overflow. The event can fire prematurely when the bound element is within the page's view-able area but outside the div's viewable area and then not fire as expected when the element comes into view in the div. – Peter Aug 12 '11 at 13:46
-
17
-
3@Shamoon check the source for the
appear plugin
and you will probably just need to add a!
somewhere to get adisappear
plugin. – Lucky Soni Mar 11 '14 at 14:48 -
5As a note, this doesn't work with jQuery 1.11.X github.com/morr/jquery.appear/issues/37 – Jason Parham Mar 17 '15 at 0:47
Here's my pure JavaScript solution that works if it's hidden inside a scrollable container too.
Demo here (try resizing the window too)
var visibleY = function(el){
var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height,
el = el.parentNode
// Check if bottom of the element is off the page
if (rect.bottom < 0) return false
// Check its within the document viewport
if (top > document.documentElement.clientHeight) return false
do {
rect = el.getBoundingClientRect()
if (top <= rect.bottom === false) return false
// Check if the element is out of view due to a container scrolling
if ((top + height) <= rect.top) return false
el = el.parentNode
} while (el != document.body)
return true
};
EDIT 2016-03-26: I've updated the solution to account for scrolling past the element so it's hidden above the top of the scroll-able container. EDIT 2018-10-08: Updated to handle when scrolled out of view above the screen.
-
thanks, maybe better be
return top <= document.documentElement.clientHeight && top >= 0;
– Yousef Salimpour Jun 15 '14 at 8:53 -
17+1 This was the only coded (i.e. not third party) answer that takes into account the recursive nature of elements. I've expanded to handle horizontal, vertical and page scroll: jsfiddle.net/9nuqpgqa – Pebbl Oct 3 '14 at 12:24
-
4This solution only checks top of the element. If first top pixel is visible, it will return true even if the rest of the item is not visible. To check if entire element is visible, you need to check bottom property too. – Wojciech Jakubas Feb 7 '16 at 10:36
-
2Aye, neat! Used to help write this answer (with credit as js comment). – Roamer-1888 Feb 15 '17 at 12:06
-
Using IntersectionObserver API
(native in modern browsers)
It's easy & efficient to determine if an element is visible in the viewport, or in any scrollable container, by using an observer.
The need to attach a scroll
event and manually checking on the event callback is eliminated, which is more efficient:
// this is the target which is observed
var target = document.querySelector('div')
// configure the intersection observer instance
var intersectionObserverOptions = {
root: null, // default is the viewport
threshold: .5 // percentage of the taregt visible area which will trigger "onIntersection"
}
var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions)
// called when target is fully visible
function onIntersection(entries, opts){
entries.forEach(entry => {
var visible = entry.intersectionRatio >= opts.thresholds[0]
console.clear();
console.log(entry.intersectionRatio.toFixed(2), visible)
target.classList.toggle('visible', visible)
})
}
// provide the observer with a target
observer.observe(target)
// To stop watching, do:
// observer.unobserve(entry.target)
span{ position:fixed; top:0; left:0; }
.box{ width:100px; height:100px; background:red; margin:1000px; transition:.5s; }
.box.visible{ background:green; }
<span>Scroll both Vertically & Horizontally...</span>
<div class='box'></div>
View browsers support table (not supported in IE/Safari)
-
4Thanks! This works for me and also got it working in IE11 with github.com/w3c/IntersectionObserver – Matt Wilson Mar 8 '18 at 17:42
-
-
Note that this STILL isn't supported in iOS/macOS Safari, unfortunately. Make sure to check perf issues if you choose to polyfill, that's a large group of users – Leland Feb 20 '19 at 23:37
-
@Leland - it's project-dependent. for all my projects this is an absolute 0 users group. I don't build websites but web system ;) – vsync Feb 21 '19 at 8:07
-
1This is now almost 100% supported by up to date browsers (except IE11) caniuse.com/intersectionobserver – MemeDeveloper Nov 22 '20 at 11:58
jQuery Waypoints plugin goes very nice here.
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});
There are some examples on the site of the plugin.
-
3For me it only worked with an offset
$('#my-div').waypoint(function() { console.log('Hello there!'); }, { offset: '100%' });
– leymannx Jun 9 '15 at 13:20
Plain vanilla to check if element (el
) is visible in scrollable div (holder
)
function isElementVisible (el, holder) {
holder = holder || document.body
const { top, bottom, height } = el.getBoundingClientRect()
const holderRect = holder.getBoundingClientRect()
return top <= holderRect.top
? holderRect.top - top <= height
: bottom - holderRect.bottom <= height
}
Usage with jQuery:
var el = $('tr:last').get(0);
var holder = $('table').get(0);
var isVisible = isScrolledIntoView(el, holder);
-
4In this era of Single Page Applications it has become more common to check if an element is visible within some other element besides window. That's why this one gets my upvote. – H Dog Feb 10 '20 at 17:10
How about
function isInView(elem){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}
After that you can trigger whatever you want once the element is in view like this
$(window).scroll(function(){
if (isInView($('.classOfDivToCheck')))
//fire whatever you what
dothis();
})
That works for me just fine
-
1This works for me, but I used the, seemingly more complete, function isScrolledIntoView at stackoverflow.com/questions/487073/… :) – Meetai.com Jul 6 '14 at 6:58
-
3I think it should be $(window).scrollTop() < $(elem).offset().top + $(elem).height() ; – Young Apr 7 '15 at 22:23
-
My modification would be like this: ` return $( window ).scrollTop() + $( window ).height() > $( elem ).offset().top + $( elem ).height(); ` – bubencode Sep 2 '18 at 21:06
Tweeked Scott Dowding's cool function for my requirement- this is used for finding if the element has just scrolled into the screen i.e it's top edge .
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
WebResourcesDepot wrote a script to load while scrolling that uses jQuery some time ago. You can view their Live Demo Here. The beef of their functionality was this:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastAddedLiveFunc();
}
});
function lastAddedLiveFunc() {
$('div#lastPostsLoader').html('<img src="images/bigLoader.gif">');
$.post("default.asp?action=getLastPosts&lastPostID="+$(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
Most answers here don't take into account that an element can also be hidden because it is scrolled out of view of a div, not only of the whole page.
To cover that possibility, you basically have to check if the element is positioned inside the bounds of each of its parents.
This solution does exactly that:
function(element, percentX, percentY){
var tolerance = 0.01; //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
if(percentX == null){
percentX = 100;
}
if(percentY == null){
percentY = 100;
}
var elementRect = element.getBoundingClientRect();
var parentRects = [];
while(element.parentElement != null){
parentRects.push(element.parentElement.getBoundingClientRect());
element = element.parentElement;
}
var visibleInAllParents = parentRects.every(function(parentRect){
var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
var visiblePercentageX = visiblePixelX / elementRect.width * 100;
var visiblePercentageY = visiblePixelY / elementRect.height * 100;
return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
});
return visibleInAllParents;
};
It also lets you specify to what percentage it has to be visible in each direction.
It doesn't cover the possibility that it may be hidden due to other factors, like display: hidden
.
This should work in all major browsers, since it only uses getBoundingClientRect
. I personally tested it in Chrome and Internet Explorer 11.
-
Thank you for this code. I wonder how you would add the event listener on scroll in this case that you have multiple nested scrollable elements? It seems like adding the listener to window alone is not enough, do we have to traverse back to the top parent to add the listener to each scrollable container? – mr1031011 Feb 13 '18 at 11:41
-
@mr1031011 It should be possible to add the handler to window and then check for the target to identify the container that was scrolled. – Domysee Feb 13 '18 at 13:59
-
isScrolledIntoView is a very needful function, so I tried it, it works for elements not heigher than the viewport, but if the element is bigger as the viewport it does not work. To fix this easily change the condition
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
to this:
return (docViewBottom >= elemTop && docViewTop <= elemBottom);
See demo here: http://jsfiddle.net/RRSmQ/
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop(),
docViewBottom = docViewTop + $(window).height(),
elemTop = $(elem).offset().top,
elemBottom = elemTop + $(elem).height();
//Is more than half of the element visible
return ((elemTop + ((elemBottom - elemTop)/2)) >= docViewTop && ((elemTop + ((elemBottom - elemTop)/2)) <= docViewBottom));
}
Here is another solution from http://web-profile.com.ua/
<script type="text/javascript">
$.fn.is_on_screen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
if( $('.target').length > 0 ) { // if target element exists in DOM
if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
$('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
} else {
$('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
}
}
$(window).scroll(function(){ // bind window scroll event
if( $('.target').length > 0 ) { // if target element exists in DOM
if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
$('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
} else {
$('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
}
}
});
</script>
See it in JSFiddle
This considers any padding, border or margin the element has as well as elements larger than the viewport itself.
function inViewport($ele) {
var lBound = $(window).scrollTop(),
uBound = lBound + $(window).height(),
top = $ele.offset().top,
bottom = top + $ele.outerHeight(true);
return (top > lBound && top < uBound)
|| (bottom > lBound && bottom < uBound)
|| (lBound >= top && lBound <= bottom)
|| (uBound >= top && uBound <= bottom);
}
To call it use something like this:
var $myElement = $('#my-element'),
canUserSeeIt = inViewport($myElement);
console.log(canUserSeeIt); // true, if element is visible; false otherwise
There is a plugin for jQuery called inview which adds a new "inview" event.
Here is some code for a jQuery plugin that doesn't use events:
$.extend($.expr[':'],{
inView: function(a) {
var st = (document.documentElement.scrollTop || document.body.scrollTop),
ot = $(a).offset().top,
wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
return ot > st && ($(a).height() + ot) < (st + wh);
}
});
(function( $ ) {
$.fn.inView = function() {
var st = (document.documentElement.scrollTop || document.body.scrollTop),
ot = $(this).offset().top,
wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
return ot > st && ($(this).height() + ot) < (st + wh);
};
})( jQuery );
I found this in a comment here ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) by a bloke called James
-
Alas, jQuery inview is no longer maintained and does not work with current versions of jQuery. – mikemaccana Dec 15 '14 at 17:49
-
1JQuery 1 is for legacy browser support, new features are in jQuery 2. – mikemaccana Dec 17 '14 at 11:18
-
Link does not show the example as the page has been updated. – Professor of programming Nov 18 '16 at 14:36
I needed to check visibility in elements inside scrollable DIV container
//p = DIV container scrollable
//e = element
function visible_in_container(p, e) {
var z = p.getBoundingClientRect();
var r = e.getBoundingClientRect();
// Check style visiblilty and off-limits
return e.style.opacity > 0 && e.style.display !== 'none' &&
e.style.visibility !== 'hidden' &&
!(r.top > z.bottom || r.bottom < z.top ||
r.left > z.right || r.right < z.left);
}
-
this works for me if I change the
e.style.opacity > 0
to(!e.style.opacity || e.style.opacity > 0)
because by default it is the empty string for me in FF. – Brett Zamir Jun 21 '14 at 1:10
Building off of this great answer, you can simplify it a little further using ES2015+:
function isScrolledIntoView(el) {
const { top, bottom } = el.getBoundingClientRect()
return top >= 0 && bottom <= window.innerHeight
}
If you don't care about the top going out of the window and just care that the bottom has been viewed, this can be simplified to
function isSeen(el) {
return el.getBoundingClientRect().bottom <= window.innerHeight
}
or even the one-liner
const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight
-
This answer like most assumes that the scroll component it the window. An element can be scrollable inside some other element. You do not account for that. – lostintranslation Dec 3 '20 at 22:39
-
@lostintranslation The original question states "Is there any way I can know if an element is now in the visible part of the page?", so an answer here doesn't require your constraint. – rpearce Dec 4 '20 at 19:54
-
you are certainly correct, an answer here does not require that. That being said meeting minimum requirements often yields minimum upvotes and help for others trying to troubleshoot problems. Just pointing out the assumption made, in case it helps others. – lostintranslation Dec 4 '20 at 19:59
I have such a method in my application, but it does not use jQuery:
/* Get the TOP position of a given element. */
function getPositionTop(element){
var offset = 0;
while(element) {
offset += element["offsetTop"];
element = element.offsetParent;
}
return offset;
}
/* Is a given element is visible or not? */
function isElementVisible(eltId) {
var elt = document.getElementById(eltId);
if (!elt) {
// Element not found.
return false;
}
// Get the top and bottom position of the given element.
var posTop = getPositionTop(elt);
var posBottom = posTop + elt.offsetHeight;
// Get the top and bottom position of the *visible* part of the window.
var visibleTop = document.body.scrollTop;
var visibleBottom = visibleTop + document.documentElement.offsetHeight;
return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}
Edit : This method works well for I.E. (at least version 6). Read the comments for compatibility with FF.
-
2For some reason document.body.scrollTop always returns 0 (on ff3). Change it to var visibleTop = (document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop); – yoavf Jan 28 '09 at 13:40
-
Sorry for that. My application must run only in IE 6 (yes, I am not lucky :( ), so I never tested this in FF... – Romain Linsolas Jan 28 '09 at 14:04
-
This would be the best answer here if it was correct. Correct one of your lines to this:
var visibleBottom = visibleTop + window.innerHeight;
I'm not using jQuery and you helped me find the correct answer. – Bitterblue Oct 29 '13 at 14:22
If you want to tweak this for scrolling item within another div,
function isScrolledIntoView (elem, divID)
{
var docViewTop = $('#' + divID).scrollTop();
var docViewBottom = docViewTop + $('#' + divID).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
You can make use of jquery plugin "onScreen" to check if the element is in the current viewport when you scroll. The plugin sets the ":onScreen" of the selector to true when the selector appears on the screen. This is the link for the plugin which you can include in your project. "http://benpickles.github.io/onScreen/jquery.onscreen.min.js"
You can try the below example which works for me.
$(document).scroll(function() {
if($("#div2").is(':onScreen')) {
console.log("Element appeared on Screen");
//do all your stuffs here when element is visible.
}
else {
console.log("Element not on Screen");
//do all your stuffs here when element is not visible.
}
});
HTML Code:
<div id="div1" style="width: 400px; height: 1000px; padding-top: 20px; position: relative; top: 45px"></div> <br>
<hr /> <br>
<div id="div2" style="width: 400px; height: 200px"></div>
CSS:
#div1 {
background-color: red;
}
#div2 {
background-color: green;
}
A more efficient version of this answer:
/**
* Is element within visible region of a scrollable container
* @param {HTMLElement} el - element to test
* @returns {boolean} true if within visible region, otherwise false
*/
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
}
Modified the accepted answer so that the element has to have it's display property set to something other than "none" to quality as visible.
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
var elemDisplayNotNone = $(elem).css("display") !== "none";
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && elemDisplayNotNone);
}
Here is a way to achieve the same thing using Mootools, in horizontal, vertical or both.
Element.implement({
inVerticalView: function (full) {
if (typeOf(full) === "null") {
full = true;
}
if (this.getStyle('display') === 'none') {
return false;
}
// Window Size and Scroll
var windowScroll = window.getScroll();
var windowSize = window.getSize();
// Element Size and Scroll
var elementPosition = this.getPosition();
var elementSize = this.getSize();
// Calculation Variables
var docViewTop = windowScroll.y;
var docViewBottom = docViewTop + windowSize.y;
var elemTop = elementPosition.y;
var elemBottom = elemTop + elementSize.y;
if (full) {
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
} else {
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
},
inHorizontalView: function(full) {
if (typeOf(full) === "null") {
full = true;
}
if (this.getStyle('display') === 'none') {
return false;
}
// Window Size and Scroll
var windowScroll = window.getScroll();
var windowSize = window.getSize();
// Element Size and Scroll
var elementPosition = this.getPosition();
var elementSize = this.getSize();
// Calculation Variables
var docViewLeft = windowScroll.x;
var docViewRight = docViewLeft + windowSize.x;
var elemLeft = elementPosition.x;
var elemRight = elemLeft + elementSize.x;
if (full) {
return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
&& (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
} else {
return ((elemRight <= docViewRight) && (elemLeft >= docViewLeft));
}
},
inView: function(full) {
return this.inHorizontalView(full) && this.inVerticalView(full);
}});
An example based off of this answer to check if an element is 75% visible (i.e. less than 25% of it is off of the screen).
function isScrolledIntoView(el) {
// check for 75% visible
var percentVisible = 0.75;
var elemTop = el.getBoundingClientRect().top;
var elemBottom = el.getBoundingClientRect().bottom;
var elemHeight = el.getBoundingClientRect().height;
var overhang = elemHeight * (1 - percentVisible);
var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
return isVisible;
}
I prefer using jQuery expr
jQuery.extend(jQuery.expr[':'], {
inview: function (elem) {
var t = $(elem);
var offset = t.offset();
var win = $(window);
var winST = win.scrollTop();
var elHeight = t.outerHeight(true);
if ( offset.top > winST - elHeight && offset.top < winST + elHeight + win.height()) {
return true;
}
return false;
}
});
so you can use it this way
$(".my-elem:inview"); //returns only element that is in view
$(".my-elem").is(":inview"); //check if element is in view
$(".my-elem:inview").length; //check how many elements are in view
You can easly add such code inside scroll
event function etc. to check it everytime user will scroll the view.
-
The use of
expr
for checking an element's scroll visibility has a huge disadvantage since it may only work for elements which are not inside scroll containers themselves, because you are using thewindow
object as the hard-coded scope. – vsync Feb 6 '18 at 12:21
There are over 30 answers to this question, and none of them use the amazingly simple, pure JS solution that I have been using. There is no need to load jQuery just to solve this, as many others are pushing.
In order to tell if the element is within the viewport, we must first determine the elements position within the body. We do not need to do this recursively as I once thought. Instead, we can use element.getBoundingClientRect()
.
pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
This value is the Y difference between the top of the object and the top of the body.
We then must tell if the element is within view. Most implementations ask if the full element is within the viewport, so this is what we shall cover.
First of all, the top position of the window is: window.scrollY
.
We can get the bottom position of the window by adding the window's height to its top position:
var window_bottom_position = window.scrollY + window.innerHeight;
Lets create a simple function for getting the element's top position:
function getElementWindowTop(elem){
return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}
This function will return the element's top position within the window or it will return 0
if you pass it something other than an element with the .getBoundingClientRect()
method. This method has been around for a long time, so you shouldn't have to worry about your browser not supporting it.
Now, our element's top position is:
var element_top_position = getElementWindowTop(element);
And or element's bottom position is:
var element_bottom_position = element_top_position + element.clientHeight;
Now we can determine if the element is within the viewport by checking if the element's bottom position is lower than the viewport's top position and by checking if the element's top position is higher than the viewport's bottom position:
if(element_bottom_position >= window.scrollY
&& element_top_position <= window_bottom_position){
//element is in view
else
//element is not in view
From there, you can perform the logic to add or remove an in-view
class on your element, which you can then handle later with transition effects in your CSS.
I am absolutely amazed that I did not find this solution anywhere else, but I do believe that this is the cleanest and most effective solution, and it doesn't require you to load jQuery!
-
Very nice explanation! But there are already answers that do exactly what you do, like Ally's answer – Domysee Apr 5 '17 at 14:03
-
1@Domysee Hmm, I somehow skipped over that. Fair enough. Thank you for pointing that out though. It is nice to see this done another way. – WebWanderer Apr 6 '17 at 4:21
The easiest solution I found for this is Intersection Observer API:
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting === true)
console.log('Element has just become visible in screen');
}, { threshold: [0] });
observer.observe(document.querySelector("#main-container"));
This method will return true if any part of the element is visible on the page. It worked better in my case and may help someone else.
function isOnScreen(element) {
var elementOffsetTop = element.offset().top;
var elementHeight = element.height();
var screenScrollTop = $(window).scrollTop();
var screenHeight = $(window).height();
var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;
return scrollIsAboveElement && elementIsVisibleOnScreen;
}
Simple modification for scrollable div (container)
var isScrolledIntoView = function(elem, container) {
var containerHeight = $(container).height();
var elemTop = $(elem).position().top;
var elemBottom = elemTop + $(elem).height();
return (elemBottom > 0 && elemTop < containerHeight);
}
NOTE: this does not work if the element is larger than the scrollable div.
Library.IsElementVisibleInContainer = function (elementSelector, containerSelector) { var containerViewTop = $(containerSelector).offset().top; var containerViewBottom = containerViewTop + $(containerSelector).height();
– Lifes Oct 30 '12 at 11:25