Test if element can be seen by the user on an html page

Question

Is there any way to know if an element is visible on an html page?

Like this:

enter image description here

One can probably do it considering the horizontal/vertical scrolling positions, the width/height of the browser window and the position/size of the element on the page, but I have little experience in jQuery so I don't know how to do it. And there might be a simple function one can call, I don't know.

possible duplicate of [How to check if an element is in the view of the user with jquery](http://stackoverflow.com/questions/8229291/how-to-check-if-an-element-is-in-the-view-of-the-user-with-jquery) — BenM, Mar 29 '13 at 14:07
http://stackoverflow.com/questions/8229291/how-to-check-if-an-element-is-in-the-view-of-the-user-with-jquery. Nicely posed question though. — nickhar, Mar 29 '13 at 14:08

dsgriffin · Accepted Answer · 2013-03-29T14:26:08.937

5

You can use the .is(':visible') selectors to check if an element is currently visible in the DOM.

Edit:

However, as @BenM mentioned, this doesn't check if the elements on your page are actually out of your scrollable range - a great little plugin you could use in that case would be Viewport Selectors for jQuery.

edited Mar 29 '13 at 14:26

answered Mar 29 '13 at 14:06

dsgriffin

61,907
17
128
134

No, you can't. That defines if it is physically displayed in the DOM, not if it's visible to the user on their screen. An element could be visible, but out of scroll range. – BenM Mar 29 '13 at 14:07

score 1 · Answer 2 · edited Dec 09 '13 at 15:12

Here is some code that I use to do this. It has been tested to work great.

function isVisible($obj) {
    var top = $(window).scrollTop();
    var bottom = top + $(window).height();
    var objTop = $obj.offset().top;
    var objBottom = objTop + $obj.height();

    if(objTop < bottom && objBottom > top) {
        //some part of $obj is visible on the screen.
        //does not consider left/right, only vertical.
    }
}

Test if element can be seen by the user on an html page

2 Answers2