Detect if a div or multiple divs are visible for the first time

Question

There are multiple div in my page. How could I detect, that any of the div is visible for the first time when the page is being scrolled down.

I was trying something like:

$('div').offset().top() < $(window).scrollTop()

but surely it won't work. What is the best way to handle this?

http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — user151496, Feb 14 '16 at 04:20

score 1 · Answer 1 · edited May 23 '17 at 10:34

Going off the first part of the answer: when something comes into view. https://stackoverflow.com/a/22480938/825240

function isScrolledIntoView(el) {
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}

This is the first step.

Now we need to have a way to see if a div has been viewed before.

var divWeCareAbout = document.getElementById("someDiv");

window.addEventListener("scroll", function(){
    if(isScrolledIntoView(divWeCareAbout)){
        if(!div.dataset.haveSeen){
            //The div had scrolled into view and 
            //this is the first we have seen of it.
            //Do whatever here.
            div.dataset.haveSeen = true;
        }
    }
});

Not to hijack this, but will this work for divs that are scrolled into view, or toggled into view with an on.click command? — Justin C, Feb 14 '16 at 05:55
@justinc As long as you have a listener for them toggled into view. — powerc9000, Feb 15 '16 at 01:29

Detect if a div or multiple divs are visible for the first time

1 Answers1