javascript - 获取视口中的元素 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" );