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得知，這不允許您使用。去做。