Geek asks and answers

Check if the element can be displayed by the user on the html page

Is there a way to find out if an element is visible on an html page?

Like this:

enter image description here

Perhaps this is possible given the horizontal / vertical scroll positions, the width / height of the browser window and the position / size of the element on the page, but I have little experience with jQuery, so I don’t know how to do this. And there may be a simple function that can be called, I do not know.

+5
source share
2 answers

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

Edit:

, @BenM, , - , , jQuery.

+5

. , .

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.
    }
}
0

More articles:


All Articles