ビューポート内の要素IDを取得

Question

divタグ内にiframeが追加されています。 iframeのコンテンツは固有のIDを有するタグ「秒」を有する、等、

<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を取得することができます方法は次のとおりです。

それは返す、つまり `getBoundingClientRect`がビューポート/窓に相対的である要素は、中に含まれている

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

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

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