Categories
javascript jquery scroll

How to check if element is visible after scrolling?

1327

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?

11

  • 57

    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.

    Jan 28, 2009 at 10:14

  • 1

    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, 2012 at 11:25


  • 4

  • 1

    Possible duplicate of How to tell if a DOM element is visible in the current viewport?

    – Sumit

    Jul 19, 2018 at 6:28

  • 4

    All answers will trigger reflow so it could be bottle neck, you shout use IntersectionObserver if supported. It will have better performance on modern browsers,

    – jcubic

    Apr 6, 2019 at 19:51


1324

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

3

  • 65

    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, 2013 at 20:29

  • 14

    For: “Any part of the element in view”, I used: ((( elemTop >= docViewTop) && (elemTop <= docViewBottom)) || ((elemBottom >= docViewTop) && (elemBottom <= docViewBottom)))

    – Grizly

    Jul 29, 2014 at 23:42

  • 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?.

    Sep 25, 2021 at 13:23


509

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

4

  • 36

    shouldn’t this be isVisible = elementTop < window.innerHeight && elementBottom >= 0? Otherwise an element half on the screen returns false.

    – gman

    Feb 23, 2015 at 21:08

  • 12

    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, 2015 at 8:45

  • 20

    I find this answer to perform better than the chosen answer. Simpler too.

    Jul 15, 2015 at 16:54

  • 15

    In comparison to the approved answer, this performs waaaay much better with hundreds of elements.

    – ncla

    Feb 15, 2016 at 0:05


130

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.

2

  • 34

    This is a cool plugin, no doubt, but doesn’t answer the question.

    – Jon Adams

    Nov 27, 2010 at 22:21

  • 19

    Is there a disappear plugin?

    – Shamoon

    Feb 5, 2012 at 23:53