Ronny Ronny - 2 years ago 64
Javascript Question

Detect when elements within a scrollable div are out of view

I need to find a good solution to the following problem. I see a lot of people asking about tracking if an element is in or outside of view Port for the page or browser window. I need to be able to replicate this action, but inside a DIV that scrolls, with overflow:scroll for example. Does anyone know of a good example, for this specific action?

Thanks in advance.

Answer Source

i had the same problem before, i have ended up with the following function.the first parameter is for the element to check, the second is to check if the element is partially is for vertical check only, you can extend it to check for horizontal scroll.

function checkInView(elem,partial)
    var container = $(".scrollable");
    var contHeight = container.height();
    var contTop = container.scrollTop();
    var contBottom = contTop + contHeight ;

    var elemTop = $(elem).offset().top - container.offset().top;
    var elemBottom = elemTop + $(elem).height();

    var isTotal = (elemTop >= 0 && elemBottom <=contHeight);
    var isPart = ((elemTop < 0 && elemBottom > 0 ) || (elemTop > 0 && elemTop <= container.height())) && partial ;

    return  isTotal  || isPart ;

check it on jsFiddle .

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download