1

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.

ittoryu
  • 51
  • 1
  • 7
  • will the elements be hidden(display:none) or they will load upon scrolling? – Josan Iracheta Jan 09 '15 at 21:14
  • For now, the entire table (all elements) are pre-loaded. – ittoryu Jan 09 '15 at 21:19
  • If that's the case, then they are visible. I think you want to check if the elements are visible in the window, right? – Josan Iracheta Jan 09 '15 at 21:26
  • "scroll top" and "offset top" won't do you any good if you're trying to detect **horizontal** visibility – SteamDev Jan 09 '15 at 21:29
  • I want to check if they're currently on the screen, not their .visible property. As for "scroll top" and "offset top", I tried, left and width but no luck there either. – ittoryu Jan 09 '15 at 21:32
  • Use `.offset()` to determine if the top of the element is greater than the window's height with `.height()` – Wild Beard Jan 09 '15 at 21:43
  • Yes calculate upper and lower bound of the displayed portion, then check if the element's in between them. – sodawillow Jan 09 '15 at 22:32
  • possible duplicate of [Check if element is visible after scrolling](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) – Umur Kontacı Jan 10 '15 at 02:28

1 Answers1

3

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!
sodawillow
  • 10,435
  • 3
  • 31
  • 41