Javascript:如何判断元素是否在视口(viewport)中？

Question

我有一个<ul>元素。它的CSS溢出属性是scroll .
我在列表中有几个列表元素，例如有一个滚动条。

<ul style="overflow: scroll; height: 100px;">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   ...
   <li></li> // how can I judge if this element is in the viewport?
</ul>

如何确定特定列表项在该列表中是否可见？

此外，如果它当前不可见，我可以使用什么属性使其滚动到 View 中？

PS:请不要使用库(jQuery、MooTools 等)。

Answer 1

这是我刚刚想出的一个功能。

我在这个答案的末尾对 jsFiddle 链接做了一些测试，它看起来是一致的。

<小时/>

function elementInViewOfParent(elem) {
    var container = elem.parentNode;
    return (container.scrollTop + container.offsetHeight) >= elem.offsetTop &&
           (container.scrollTop - elem.offsetHeight) <= elem.offsetTop;
}

<小时/>

jsFiddle example - 只需将其滚动到您想要的任何位置，然后单击按钮即可。
在本例中，它检查红色 LI 的可见性。