在視口中獲取元素ID

我在div標籤內添加了一個iframe。 Iframe內容具有帶特定ID的「sec」標記，例如，在視口中獲取元素ID

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

Iframe內容使用列寬和列間距水平分佈。 Div可根據iframes的寬度進行滾動。

我需要找到的是當前在視口中可見的'sec'標記的第一個和最後一個id值。

我發現關於getBoundingClientRect但不清楚它如何使用？

另外值得關注的是，它會不會增加處理負荷，因爲我們需要運行一個循環來檢查每個標籤位置？

任何人都可以遮擋它嗎？

來源

2017-02-10 pravid

'getBoundingClientRect'是相對於視/窗口中的元素都包含在，也就是說，它會返回iframe中的位置。你需要知道iframe中的元素是否可見嗎？或者你需要知道它們是否在iframe中可見_and_ iframe在主窗口內是否可見？ – hashchange

如果性能很重要或者使用jQuery爲您工作，您可能需要查看[jQuery.isInView]（https://github.com/hashchange/jquery.isinview），這是我寫的一個組件，它可以完成這項工作（並且速度非常快）並且適用於iframe。 – hashchange

我需要找到在該視口內可見的div或標籤的所有id。使用插件可以在可見區域中獲取第一個和最後一個元素嗎？ – pravid

這裏是你如何能得到第一個和最後一個可見元素的ID在iframe內，使用jQuery.isInView：

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

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

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

來源

2017-02-10 11:33:05 hashchange

我不得不做很少的改動，但是效果很好，謝謝！接受爲答案。 – pravid

在視口中獲取元素ID

回答

相關問題