1

我有一个<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 等）。

4

2 回答 2

0

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

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

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


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

于 2013-11-03T11:14:19.367 回答
-1

如果您对使用 jQuery 没问题，它会滚动，以便elem在顶部可见。

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

（您甚至可以为滚动设置动画：jQuery 滚动到元素）。

另一种解决方案是使用<a target="foo"></a>, 并将 URL 片段更改为滚动到特定元素，但您特别要求能够从 JavaScript 中分辨出来，这不允许您这样做。

于 2013-11-03T09:11:14.267 回答