How to check if element is visible after scrolling?

Question

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?

I don't really get the problem. Could you try to add more info? — Natrium, Jan 28 '09 at 10:04
he means that he wants a method to know if a given element is displayed in the browser window, or if the user needs to scroll to see it. — Romain Linsolas, Jan 28 '09 at 10:14
To check if an element is fully visible in a container, just add an extra selector param and re-use the elem code for it. `Library.IsElementVisibleInContainer = function (elementSelector, containerSelector) { var containerViewTop = $(containerSelector).offset().top; var containerViewBottom = containerViewTop + $(containerSelector).height();` — Lifes, Oct 30 '12 at 11:25
possible duplicate of [How to tell if a DOM element is visible in the current viewport?](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) — Audrius Meškauskas, Feb 20 '13 at 20:27
The library is just a function I created. E.g. `function Library() { }`. I write my javascript this way because I find it easier to read/maintain versus just having a function (e.g. IsElementVisibleInContainer) and having no idea where it came from. — Lifes, Feb 21 '13 at 20:26
intersection observer will be the answer... but not quite yet unless you use a polyfill for Safari and IE. Observer is a new version of Event. This will fire a callback when nn% of the element is visible. See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API — Andrew Murphy, May 24 '18 at 06:32
Possible duplicate of [How to tell if a DOM element is visible in the current viewport?](https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) — Sumit, Jul 19 '18 at 06:28
All answers will trigger reflow so it could be bottle neck, you shout use [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) if supported. It will have better performance on modern browsers, — jcubic, Apr 06 '19 at 19:51
Ready non-perfect solution is here: https://github.com/proxy-m/real-visibility — user1742529, Jan 02 '21 at 13:12
Use Intersection Observer API to Detect if Element is in Viewport, details here – https://frontendguruji.com/blog/how-to-detect-if-element-is-in-viewport-intersection-observer-api/ — Mandeep Pasbola, Jan 31 '22 at 06:09

score 1341 · Accepted Answer · edited Oct 13 '16 at 14:27

1341

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');
}

edited Oct 13 '16 at 14:27

Andrea Casaccia

4,802
4
29
54

answered Jan 28 '09 at 15:36

Scott Dowding

13,749
1
16
10

69

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

For: "Any part of the element in view", I used: ((( elemTop >= docViewTop) && (elemTop <= docViewBottom)) || ((elemBottom >= docViewTop) && (elemBottom <= docViewBottom))) – Grizly Jul 29 '14 at 23:42
1

This works fine when the element is in open document, this gives inappropriate result when use for element inside some scrollable division, I tried replacing `$(window)` with `$("somediv")` still no accurate result, how can I get accurate result on this?. – Mohammed Khurram Sep 25 '21 at 13:23
You might also want to check out this method, which is not (yet) standard, but hopefully becomes standard in the future. It makes these calculations uneccessary in cases where you just want to scroll an element into view: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded – tillsanders Jun 20 '23 at 16:07

score 549 · Answer 2 · edited Dec 03 '17 at 13:26

549

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

edited Dec 03 '17 at 13:26

jcubic

61,973
54
229
402

answered Mar 18 '14 at 13:31

korywka

7,537
2
26
48

37

shouldn'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
14

no. 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. – korywka Feb 24 '15 at 08:45
21

I find this answer to perform better than the chosen answer. Simpler too. – Adam Venezia Jul 15 '15 at 16:54
16

In comparison to the approved answer, this performs waaaay much better with hundreds of elements. – ncla Feb 15 '16 at 00:05

score 164 · Answer 3 · edited Oct 11 '22 at 13:21

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:

// define an observer instance
var observer = new IntersectionObserver(onIntersection, {
  root: null,   // default is the viewport
  threshold: .5 // percentage of target's visible area. Triggers "onIntersection"
})

// callback is called on intersection change
function onIntersection(entries, opts){
  entries.forEach(entry =>  
    entry.target.classList.toggle('visible', entry.isIntersecting)
  )
}

// Use the observer to observe an element
observer.observe( document.querySelector('.box') )

// To stop observing:
// observer.unobserve(entry.target)

span{ position:fixed; top:0; left:0; }
.box{ width:100px; height:100px; background:red; margin:1000px; transition:.75s; }
.box.visible{ background:green; border-radius:50%; }

<span>Scroll both Vertically &amp; Horizontally...</span>
<div class='box'></div>

Supported by modern browsers, including mobile browsers. Not supported in IE - View browsers support table

Safari is the new IE, everything I would like to implement these days is supported by all evergreen browsers... except safari — run_the_race, Jan 15 '22 at 17:24

Joe Lencioni · Answer 4 · 2020-01-02T18:39:15.237

133

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.

edited Jan 02 '20 at 18:39

answered Aug 20 '10 at 21:31

Joe Lencioni

10,231
18
55
66

34

This is a cool plugin, no doubt, but doesn't answer the question. – Jon Adams Nov 27 '10 at 22:21
20

Is there a disappear plugin? – Shamoon Feb 05 '12 at 23:53
$('#disappear-plugin') – user66081 Jan 29 '23 at 09:38

Ally · Answer 5 · 2018-10-08T03:11:57.243

102

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.

edited Oct 08 '18 at 03:11

answered Feb 07 '14 at 12:02

Ally

4,894
8
37
45

23

+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: http://jsfiddle.net/9nuqpgqa/ – Pebbl Oct 03 '14 at 12:24
Angular version here: https://stackblitz.com/edit/angular-ivy-hsnnia - includes identifying which rows of a table are visible. – Paul Evans Feb 22 '22 at 05:43
The solution from @Pebbl is very useful, but doesn't account for elements with `overflow: auto` – pdw Jun 30 '22 at 08:31

score 59 · Answer 6 · edited Dec 16 '22 at 13:39

59

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 = isElementVisible(el, holder);

edited Dec 16 '22 at 13:39

Abijeet Patro

2,842
4
37
64

answered Jan 20 '17 at 01:37

Denis Matafonov

2,684
23
30

8

In 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. – FirstVertex Feb 10 '20 at 17:10
2

NOTE: If you want to have this return based on any part of the element not being visible (as was in my case), remove the height variable from the function and change the places it's used to just 0 (zero). Then if you have only "part" of the element hidden, it will return false. – Steve-O-Rama Jan 14 '22 at 01:53
Why your function name in the jQuery usage is different? – amir22 May 07 '22 at 08:48

score 41 · Answer 7 · answered Dec 04 '11 at 12:08

41

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.

answered Dec 04 '11 at 12:08

Fedir RYKHTIK

9,844
6
58
68

3

For me it only worked with an offset `$('#my-div').waypoint(function() { console.log('Hello there!'); }, { offset: '100%' });` – leymannx Jun 09 '15 at 13:20

score 25 · Answer 8 · edited Nov 09 '15 at 08:18

25

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

edited Nov 09 '15 at 08:18

sectus

15,605
5
55
97

answered Apr 29 '14 at 10:24

webicy

1,584
1
14
16

score 16 · Answer 9 · answered Apr 30 '13 at 16:08

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));
}

Domysee · Answer 10 · 2016-11-02T09:40:40.327

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
This fails the simplest test with a button below the viewport, misreports the button as visible: [jsfiddle](http://jsfiddle.net/a1cu5xd3/9/) - see the fiddle's Console. Or is this some kind of jsfiddle iframe limitation that wouldn't happen in reality? It also doesn't handle ` — Vsevolod Golovanov, Oct 11 '21 at 15:08

score 15 · Answer 11 · answered Jan 28 '09 at 14:14

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();
    });
};

score 10 · Answer 12 · answered Jan 02 '20 at 10:52

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"));

Robert · Answer 13 · 2023-03-30T12:46:04.490

8

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 a demo jsfiddle here.

edited Mar 30 '23 at 12:46

answered Oct 23 '13 at 17:30

Robert

664
9
25

Adrian P. · Answer 14 · 2021-05-10T12:34:01.663

Here is another solution:

<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).on('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

Brent Barbata · Answer 15 · 2015-01-08T17:00:02.853

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

ness-EE · Answer 16 · 2018-06-04T11:41:26.627

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

Pascal Gagneur · Answer 17 · 2009-10-09T10:42:03.830

7

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));
}

edited Oct 09 '09 at 10:42

answered Oct 09 '09 at 09:49

Pascal Gagneur

142
1
4

score 7 · Answer 18 · edited Jun 21 '14 at 01:28

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);
    }

score 7 · Answer 19 · edited May 23 '17 at 12:02

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

score 6 · Answer 20 · answered Oct 20 '21 at 07:55

The Javascript code could be written as :

window.addEventListener('scroll', function() {
    var element = document.querySelector('#main-container');
    var position = element.getBoundingClientRect();

    // checking whether fully visible
    if(position.top >= 0 && position.bottom <= window.innerHeight) {
        console.log('Element is fully visible in screen');
    }

    // checking for partial visibility
    if(position.top < window.innerHeight && position.bottom >= 0) {
        console.log('Element is partially visible in screen');
    }
});

and in react js written as:

    componentDidMount() {
        window.addEventListener('scroll', this.isScrolledIntoView);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.isScrolledIntoView);
    }
  
  isScrolledIntoView() {
        var element = document.querySelector('.element');
        var position = element.getBoundingClientRect();

        // checking whether fully visible
        if (position.top >= 0 && position.bottom <= window.innerHeight) {
            console.log('Element is fully visible in screen');
        }
        // checking for partial visibility
         if (position.top < window.innerHeight && position.bottom >= 0) {
            console.log('Element is partially visible in screen');
         }
    }

Adam Pietrasiak · Answer 21 · 2016-09-15T09:45:13.710

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.

Romain Linsolas · Answer 22 · 2009-01-28T14:04:59.587

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.

Samiya Akhtar · Answer 23 · 2013-04-05T19:33:56.717

4

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)); 
}

edited Apr 05 '13 at 19:33

answered Feb 14 '13 at 18:49

Samiya Akhtar

83
7

score 4 · Answer 24 · answered Mar 04 '15 at 11:34

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

score 4 · Answer 25 · edited May 23 '17 at 11:55

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

score 4 · Answer 26 · answered Sep 11 '17 at 23:15

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);
 }

score 3 · Answer 27 · answered Sep 16 '13 at 20:02

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);
}

score 3 · Answer 28 · answered Jun 14 '14 at 20:59

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);
}});

score 3 · Answer 29 · answered Aug 15 '14 at 14:23

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

hashchange · Answer 30 · 2015-03-08T17:51:50.550

I have written a component for the task, designed to handle large numbers of elements extremely fast (to the tune of <10ms for 1000 elements on a slow mobile).

It works with every type of scroll container you have access to – window, HTML elements, embedded iframe, spawned child window – and is very flexible in what it detects (full or partial visibility, border box or content box, custom tolerance zone, etc).

A huge, mostly auto-generated test suite ensures that it works as advertised, cross-browser.

Give it a shot if you like: jQuery.isInView. Otherwise, you might find inspiration in the source code, e.g. here.

score 3 · Answer 31 · answered Sep 26 '16 at 17:35

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!

score 2 · Answer 32 · answered Sep 10 '14 at 20:41

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.

score 2 · Answer 33 · answered Jan 23 '15 at 11:50

I adapted this short jQuery function extension, which you can feel free to use (MIT licence).

/**
 * returns true if an element is visible, with decent performance
 * @param [scope] scope of the render-window instance; default: window
 * @returns {boolean}
 */
jQuery.fn.isOnScreen = function(scope){
    var element = this;
    if(!element){
        return;
    }
    var target = $(element);
    if(target.is(':visible') == false){
        return false;
    }
    scope = $(scope || window);
    var top = scope.scrollTop();
    var bot = top + scope.height();
    var elTop = target.offset().top;
    var elBot = elTop + target.height();

    return ((elBot <= bot) && (elTop >= top));
};

score 2 · Answer 34 · edited Mar 29 '23 at 04:25

I was looking for a way to see if the element is going to come into view soon, so by extending the snippets above I managed to do it.

elem is the element you want to check is in the view.
scrollElement is the window or a parent element that has a scroll.
It fires when the element is offset pixels away.

function isScrolledIntoView(elem, scrollElement, offset)
{
    var $elem = $(elem);
    var $window = $(scrollElement);
    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();
    
    return (((elemBottom+offset) >= docViewBottom) && ((elemTop-offset) <= docViewTop)) || (((elemBottom-offset) <= docViewBottom) && ((elemTop+offset) >= docViewTop));
}

Alireza · Answer 35 · 2019-01-31T05:13:47.887

2

We can do something like this in modern browsers using ES6:

const isFullySeen = el => el &&
  typeof el.getBoundingClientRect === 'function' &&
  el.getBoundingClientRect()['bottom'] + window.scrollY <= 
    window.innerHeight + window.scrollY && 
  el.getBoundingClientRect()['top'] + window.scrollY <= 
    window.innerHeight + window.scrollY;

edited Jan 31 '19 at 05:13

answered Jan 31 '19 at 04:32

Alireza

100,211
27
269
172

score 2 · Answer 36 · answered Dec 13 '20 at 14:19

I added my code modification. Unfortunately, I can see everyone in their version and everyone omits the use of the debance function. Which answer is for your Event not to fire, for example, 200 times per second while scrolling.

$(window).scroll(function(){
        if (isInView($('.class'))){
            debounce(
                someFunction(), 5
            )
        }
    });
    function isInView(elem){
        if(document.documentElement.clientWidth > 991){
            return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
        }else {
            doSometing;
        }
    }

score 1 · Answer 37 · answered Mar 14 '13 at 14:35

I just wanted to share that I combined this with my script to move the div so that it always stays in view:

    $("#accordion").on('click', '.subLink', function(){
        var url = $(this).attr('src');
        updateFrame(url);
        scrollIntoView();
    });

    $(window).scroll(function(){
            changePos();
    });

  function scrollIntoView()
  {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();    
        var elemTop = $("#divPos").offset().top;
        var elemBottom = elemTop + $("#divPos").height();               
        if (elemTop < docViewTop){
            $("#divPos").offset({top:docViewTop});
        }
   }

   function changePos(){        
    var scrTop = $(window).scrollTop();
    var frmHeight = $("#divPos").height()
        if ((scrTop < 200) || (frmHeight > 800)){   
         $("#divPos").attr("style","position:absolute;");
        }else{
          $("#divPos").attr("style","position:fixed;top:5px;");
        }
    }

score 1 · Answer 38 · answered May 17 '21 at 14:33

On Typescript

  private readonly isElementInViewPort = (el: HTMLElement): boolean => {
      const rect = el.getBoundingClientRect();
      const elementTop = rect.top;
      const elementBottom = rect.bottom;
      const scrollPosition = el?.scrollTop || document.body.scrollTop;
      return (
        elementBottom >= 0 &&
        elementTop <= document.documentElement.clientHeight &&
        elementTop + rect.height > elementTop &&
        elementTop <= elementBottom &&
        elementTop >= scrollPosition
      );

};

score 1 · Answer 39 · answered Jan 15 '22 at 17:50

The other answers generally don't check if the element is in view along the X axis, i.e. could be in the current viewports Y range, but out of the X range. This function checks X and Y if any part of the item is showing in the viewport:

function checkElInView(el) {
    if (!el || !typeof el.getBoundingClientRect === "function") return false;
    const r = el.getBoundingClientRect();
    const vw = document.documentElement.clientWidth;
    const vh = document.documentElement.clientHeight;
    const inViewX = (r.left > 0 && r.left < vw) || (r.right < vw && r.right > 0);
    const inViewY = (r.top > 0 && r.top < vh) || (r.bottom < vh && r.bottom > 0);
    return inViewX && inViewY;
}

score 0 · Answer 40 · answered Apr 18 '15 at 12:15

The only plugin which works consistently for me for doing this, is: https://github.com/customd/jquery-visible

I ported this plugin to GWT recently since I didn't want to add jquery as a dependency just for using the plugin. Here's my (simple) port (just including the functionality that I need for my use case):

public static boolean isVisible(Element e)
{
    //vp = viewPort, b = bottom, l = left, t = top, r = right
    int vpWidth   = Window.getClientWidth();
    int vpHeight = Window.getClientHeight();


    boolean tViz = ( e.getAbsoluteTop() >= 0 && e.getAbsoluteTop()<  vpHeight);
    boolean bViz = (e.getAbsoluteBottom() >  0 && e.getAbsoluteBottom() <= vpHeight);
    boolean lViz = (e.getAbsoluteLeft() >= 0 && e.getAbsoluteLeft() < vpWidth);
    boolean rViz = (e.getAbsoluteRight()  >  0 && e.getAbsoluteRight()  <= vpWidth);

    boolean vVisible   = tViz && bViz;
    boolean hVisible   = lViz && rViz;

    return hVisible && vVisible;
}

score 0 · Answer 41 · answered May 04 '15 at 21:39

Checks if the element is on screen at all, rather than the accepted answer's approach that checks if the div is entirely on the screen (which won't work if div is bigger than the screen). In pure Javascript:

/**
 * Checks if element is on the screen (Y axis only), returning true
 * even if the element is only partially on screen.
 *
 * @param element
 * @returns {boolean}
 */
function isOnScreenY(element) {
    var screen_top_position = window.scrollY;
    var screen_bottom_position = screen_top_position + window.innerHeight;

    var element_top_position = element.offsetTop;
    var element_bottom_position = element_top_position + element.offsetHeight;

    return (inRange(element_top_position, screen_top_position, screen_bottom_position)
    || inRange(element_bottom_position, screen_top_position, screen_bottom_position));
}

/**
 * Checks if x is in range (in-between) the
 * value of a and b (in that order). Also returns true
 * if equal to either value.
 *
 * @param x
 * @param a
 * @param b
 * @returns {boolean}
 */
function inRange(x, a, b) {
    return (x >= a && x <= b);
}

score 0 · Answer 42 · answered Jun 14 '16 at 11:04

Made a simple plugin detecting if element is visible within a scrollable container

    $.fn.isVisible = function(){

      var win;
      if(!arguments[0])
      {
        console.error('Specify a target;');
        return false;
      }
      else
      {
        win = $(arguments[0]);
      }
      var viewport = {};
      var bounds = this.offset();
      bounds.right = bounds.left + this.outerWidth();
      bounds.bottom = bounds.top + this.outerHeight();
      viewport.bottom = win.height() + win.offset().top;
      return (!( bounds.top > viewport.bottom) && (win.offset().top < bounds.bottom));
    };

Call it like this $('elem_to_check').isVisible('scrollable_container');

Hope it'll help.

desbest · Answer 43 · 2020-05-14T13:15:32.933

0

The jquery scrollspy plugin will allow you to easily do this. https://github.com/thesmart/jquery-scrollspy

$('.tile').on('scrollSpy:enter', function() {
    console.log('enter:', $(this).attr('id'));
});

$('.tile').on('scrollSpy:exit', function() {
    console.log('exit:', $(this).attr('id'));
});

$('.tile').scrollSpy();

edited May 14 '20 at 13:15

answered May 07 '20 at 20:10

desbest

4,746
11
51
84

score 0 · Answer 44 · edited Mar 29 '23 at 04:21

0

The only solution that worked for me to return true when $("#elementToCheck") is visible is:

$(document).scrollTop()+window.innerHeight+$("#elementToCheck").height()>$("#elementToCheck").offset().top

edited Mar 29 '23 at 04:21

user16217248

3,119
19
19
37

answered Apr 19 '21 at 12:44

nonozor

865
2
14
24

score -1 · Answer 45 · answered May 30 '17 at 19:31

-1

Javascript only :)

function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}

answered May 30 '17 at 19:31

Bryan

17,201
24
97
123

Where does `getBoundingClientRect` came from? – Vandolph Reyes Dec 25 '17 at 04:15

Damilola Boiyelove · Answer 46 · 2017-10-08T08:30:08.713

After running around unproductively to and using several codes that didn't work. This is what worked for me on vertical scroll visibility using Jquery. Replce '#footerplace' with the element you'd like to track vertically.

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  console.log(rect)
  console.log('window height', $(window).height());

  return (
           (rect.top <= $(window).height()) && (rect.bottom <= $(window).height())
         );
};
$(document).scroll(function(){
    if ($('#footerplace').is(':offscreen')){
      console.log('this is true');
    $('#footerplace').is(':offscreen');
    } else {
     console.log('this is false');
    $('#footerplace').is(':offscreen');

    }

How to check if element is visible after scrolling?

46 Answers46

Using IntersectionObserver API

(native in modern browsers)

Supported by modern browsers, including mobile browsers. Not supported in IE - View browsers support table

Linked

Related