获取视口中的元素 id答案

【问题标题】：Get element id's within viewport获取视口中的元素 id
【发布时间】：2017-02-10 07:34:36
【问题描述】：

我在 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 但不清楚如何使用它？

还有一个问题是它不会增加处理负载，因为我们需要运行一个循环来检查每个标签的位置吗？

谁能给它遮光？

【问题讨论】：

getBoundingClientRect 相对于包含元素的视口/窗口，即它返回 iframe 内的位置。您是否需要知道元素在 iframe 中是否可见？或者您是否需要知道它们在 iframe 内是否可见以及 iframe 在主窗口内是否可见？
如果性能很重要或使用 jQuery 适合您，您可能想看看 jQuery.isInView，这是我编写的一个组件，它可以完成这项工作（并且速度非常快）并且适用于iframe。
我需要找到在该视口中可见的所有 div 或标签的 id。是否可以使用插件获取可见区域中的第一个和最后一个元素？
你给它一个 jQuery 集合，由你想要检查的元素（你的 sec 元素）组成，它返回过滤后的集合，只包含可见元素。只需选择结果集中的第一个和最后一个元素。
谢谢，这似乎是解决方案。让我试着用我的项目测试一下。

标签： javascript jquery viewport getboundingclientrect

【解决方案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" );

【讨论】：

我不得不做一些改变，但效果很好，谢谢！接受作为答案。