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 example - 只需在任意位置滚动即可，然后点击按钮在此示例中，它会检查红色LI的可见性。

Answer 2

如果你可以使用jQuery，那么这将滚动，以便elem可见并位于顶部。

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

（你甚至可以为卷轴设置动画：jQuery scroll to element）。

另一个解决方案是使用<a target="foo"></a>，并更改URL片段以滚动到特定元素，但您明确要求能够从JavaScript中告知，这不允许您这样做。< / p>

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

2 个答案: