获取视口内的元素 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

以下是获取 iframe 中第一个和最后一个可见元素的 ID 的方法，使用 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" );

获取视口内的元素 ID

Get element id's within viewport

javascript

jquery

viewport

getboundingclientrect