Question

示例标记：

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

第一个li和第二个li对用户可见。第3个太大，无法显示overflow: hidden。但就jQuery而言，使用：

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

将始终返回true，因为它没有display: none等。

CSS：

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

有人知道如何从溢出隐藏的div中检测元素是否可见？

Answer 1

您需要将<li>项的顶部与溢出div的scrollTop()进行比较。

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

请注意，此代码假定如果li的任何部分可见，则该项目可见。你也可以考虑李的身高。

修改

如果您的溢出内容为hidden，scrollTop将始终为0，因此您应该将LI的顶部位置与overflow div的高度进行比较。

这是一个有效的演示http://jsfiddle.net/qaGpm/。为了演示，我将溢出从hidden更改为visible ....

Answer 2

您可以检查elt.scrollTop()值是否大于元素的elt.position().top + elt.height()。

但请看一下这个插件：http://imakewebthings.github.com/jquery-waypoints/ 不知道你确切的问题，但听起来它可能有用。

Answer 3

你可以问：

if($('.selected').css('overflow')=="visible")
{ 
    //DO somthing
}

在隐藏溢出隐藏的情况下检测用户视点中是否存在某些内容

3 个答案: