在视口中获取元素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

回答

相关问题