fnvjvg
Last Updated: December 27, 2018
·
79.25K
· stevenwadejr

jQuery - Test if element is in viewport

Just came across this little beauty...

Test to determine if an element is visible within the viewport of the browser.

My thanks and compliments to the original author.

$.fn.isOnScreen = 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));

};

Original post

jsFiddle Example

7 Responses
Add your response

9052

This uses a callback (http://jsfiddle.net/LAJNz/1/):

$.fn.isOnScreen = function (cbTrue, cbFalse) {

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

    var isOnScreen = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    return isOnScreen
      ? cbTrue && cbTrue(viewport, bounds)
      : cbFalse && cbFalse(viewport, bounds);
};

SECOND EDIT IS NOT REFLECTED IN JSFIDDLE!

over 1 year ago ·
9770

This doesn't seem to determine if the object is in the viewport, it simply detects if the the element has been scrolled past.

i.e. it returns true even if the element is at the bottom of the page (out of the viewport), and your viewport is at the top, and only returns false once the element leaves the top of the viewport.

So it's more HasThisElementBeenScrolledPast()

over 1 year ago ·
11785

i wrote this one

$.fn.inView = function(){
    //Window Object
    var win = $(window);
    //Object to Check
    obj = $(this);
    //the top Scroll Position in the page
    var scrollPosition = win.scrollTop();
    //the end of the visible area in the page, starting from the scroll position
    var visibleArea = win.scrollTop() + win.height();
    //the end of the object to check
    var objEndPos = (obj.offset().top + obj.outerHeight());
    return(visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false)
};


$(window).scroll(function(){
    alert($("#obj").inView());
});
over 1 year ago ·
23355

var objEndPos = (obj.offset().top + win.height());

i my opinion this objEndPos , in this way will be more useful , beacause your approach will give false untill i have completely scroll down for obj section.

But this way , it will return true once obj div is covered on screen.
BTW Thank you

over 1 year ago ·
31189

thanks for information.

https://plusmodapks.xyz/

3 months ago ·
31421

Great example but I had to customize it in order to scroll up/down if top/bottom portion of element was not in viewport. I also stripped out horizontal checks as I only need to scroll vertically to selected element.


$.fn.isOnScreen = function(el){
var win = $(window);
var bounds = el.offset();

var viewport = {
top : win.scrollTop()
};

viewport.bottom = viewport.top + win.height();
bounds.bottom = bounds.top + el.outerHeight();

return (!(viewport.bottom < bounds.top || viewport.bottom < bounds.bottom || viewport.top > bounds.bottom || viewport.top > bounds.top));
};

about 2 months ago ·
31512

Mobile phone users can't listen to music on demand, HD music, and offline play lists. Of course running a music company is not just about a few income but also on spending money. With an Unlimited subscription https://getpremiumfree.com/ you have access to everything you had as a completely free user, minus the advertisements with the added benefit of high quality monitors and also the power to use the service abroad without constraints. Notice: MaxisONE plan 128, MaxisONE plan 158 and also MaxisONE plan 188 clients like greater than 15GB of free Spotify data till 30 September 20-16 (not applicable for song browsing, which includes scrolling through records and play lists with art ) apart from complimentary Spotify Premium access.
https://www.talktowendys.ooo/

28 days ago ·