Javascript：我如何判斷一個元素在視口中？

我有一個<ul>元素。它的CSS溢出屬性是scroll。
我在列表中有幾個列表元素，以便有一個滾動條。Javascript：我如何判斷一個元素在視口中？

<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等）。

來源

2013-11-03 hh54188

jQuery是純粹的JavaScript。它必須是，因爲它是作爲JavaScript執行的。我認爲更好的措辭是爲了，哈哈。至於答案，我會爲你研究一下。 –

@JoeSimmons，這是否符合你想要的措辭：「沒有外部JavaScript庫。」 –

是的，「沒有圖書館」會很好。 –

-1

如果您可以使用jQuery，則會滾動以便elem可見且位於頂部。

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

（你甚至可以動畫滾動：jQuery scroll to element）。

另一種解決方案是使用<a target="foo"></a>，並更改URL片段以滾動到某個特定元素，但是您特別要求能夠通過JavaScript進行分析，而這不允許您這麼做。

來源

2013-11-03 09:11:14

謝謝，但沒有jquery，純javascript請 – hh54188

那麼，jQeury的'抵消'是不平凡的，但我相信你將不得不重寫它（或仔細複製和粘貼）以得到你想要的。 –

這是我剛想到的一個功能。

我在這個答案的末尾對jsFiddle鏈接做了一些測試，看起來一致。

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

jsFiddle example - 只需滾動它不管你想要的，然後單擊按鈕。
在本例中，它檢查紅色LI的可見性。

來源

2013-11-03 11:14:19

Javascript：我如何判斷一個元素在視口中？

回答

相關問題