Javascript：如何判断元素在视口中？

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>

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

另外，如果当前不可见，可以使用什么属性使其滚动到视图中？

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示例 -只需将其滚动至所需位置，然后单击按钮即可。
在此示例中，它检查红色LI的可见性。

Answer 2

如果您可以使用jQuery，它将滚动以使elem可见并在顶部。

function scrollTo(elem) {
    var offset = $(elem).offset();
    $(window).scrollTop(offset.top);
}

（您甚至可以动画化滚动： jQuery滚动到element ）。

另一种解决方案是使用<a target="foo"></a> ，然后将URL片段更改为滚动到特定元素，但是您特别要求能够从JavaScript得知，这不允许您使用。去做。