獲取視口內的元素ID

Question

我在div標簽內添加了iframe。 iframe內容包含帶有特定ID的代碼“ sec”，例如，

<p>
<sec id='1'>some text</sec>
<sec id='2'>some other text</sec>
</p>

iframe內容會使用列寬和列間距水平分布。 Div可按照iframe寬度滾動。

我需要找到的是“ sec”標簽的第一個和最后一個id值，當前在視口中可見。

我發現了有關getBoundingClientRect的信息，但不清楚如何使用？

同樣值得關注的是，由於我們需要運行一個循環來檢查每個標簽的位置，這會不會增加處理負荷？

誰能在上面遮住一些光？

Answer 1

這是使用jQuery.isInView獲取 iframe中第一個和最后一個可見元素的ID的方法：

var $iframe = $( yourIframeSelector ),
    _document = $iframe[0].contentDocument,

    $elements = $( yourElementSelector, _document ),
    $visible = $elements.inView( _document ),

    firstId = $visible.first().attr( "id" ),
    lastId = $visible.last().attr( "id" );