Check if element is visible on screen JavaScript/jQuery/iScroll

Question

I'm using iScroll for horizontal scrolling and I have a long horizontal table and I'm trying to see if specific columns are visible.

I tried the following code which I found online:

function checkVisible( elm, evalType ) {
evalType = evalType || "visible";

var vpH = $(window).height(), // Viewport Height
    st = $(window).scrollTop(), // Scroll Top
    y = $(elm).offset().top,
    elementHeight = $(elm).height();

if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
alert('done');
};

however, it seems to always tell me that the element is visible on screen even though it's not. Any other way I could tell whether this table column is actually on screen on the browser?

Thanks.

Answer 1

The upper bound of the visible part of the page screen will be $(window).scrollTop()

The lower bound will be $(window).scrollTop() + $(window).height()

("upper" and "lower" are referring to physical boundaries)

Determine if $(element).offset().top is between those values to know if your element is in the visible viewport.

I have embedded this in the scroll handler but you can simply build a function to test your elements :)

See this Fiddle for a full example (watch the console when the green div gets visible) : http://jsfiddle.net/6v8j8z8e/3/

$(function() {
    $(window).on("scroll", function() {
        var up = $(window).scrollTop(),
            down = $(window).scrollTop() + $(window).height();
        
        if(($("div").offset().top > up) && ($("div").offset().top < down)) {
            console.log("green div is visible");
        }
    });
});

div {
    background: green;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. <div>TARGET</div>Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque!