javascript - 检测某些内容是否不在用户的视角中，同时隐藏在溢出隐藏中

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 对用户可见。由于overflow:hidden，第三个太大而无法显示。但就 jQuery 而言，使用:

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

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

CSS:

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

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

Answer 1

您需要比较 <li> 的顶部项目到scrollTop()溢出div。

$('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 的高度进行比较分区

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