Question

So the example mark-up:

<div class="overflow">
    <ul>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
    </ul>                                
</div>

The first li and the second li are visible to the user. The 3rd is too large to be displayed given the overflow: hidden. But as far as jQuery is concerned using:

$('.selected').is(':visible')

will always return true as it doesn’t have display: none etc.

CSS:

.overflow {
    overflow: hidden;
    width: auto;
    max-width: 490px;
}

Does anybody know how to detect if the element is visible from within the overflow hidden div?

Answer 1

You’ll need to compare the top of the <li> item to the scrollTop() of the overflow div.

$('li').each(function(){
    oScrollTop = $('.overflow').scrollTop();
    var thisItemIsVisible = ($(this).position().top < oScrollTop);
    console.log('This LI is Visible: ' + thisItemIsVisible);
});

Note, this code assumes that if any part of the li is visible, the item is visible. You might want to take the li’s height into consideration also.

EDIT

If your overflow content is hidden, scrollTop will always be 0, so you should compare the LI’s top position to the height of the overflow div.

Here is a working demo http://jsfiddle.net/qaGpm/. For the sake of demonstration, I changed the overflow from hidden to visible ….