ens********

2022/1/27 11:35

11回答

ブラウザの画面内に今表示されている画像をjavascriptで取得したい firefoxとgreasemonkeyでユーザースクリプトを作っています。

ブラウザの画面内に今表示されている画像をjavascriptで取得したい firefoxとgreasemonkeyでユーザースクリプトを作っています。 画像が縦に大量にあるページで、スクロールしていくと順番に画像が表示されていくわけなんですが、現在のスクロール位置の画面内にある画像を取得したいです。 今の実装だとページ内の全画像を取得して、forループで全画像のoffsetTopを今のスクロール位置と比べて取得しているんですが、愚直すぎる気がするのでもっといい方法を考えています。 なにかスマートな方法はありますか？

JavaScript | HTML、CSS・21閲覧

ベストアンサー

0
oishii_mahou

カテゴリマスター

2022/1/27 15:38

要素の位置は offsetTop じゃなく、 getBoundingClientRect() で取得すると安定。 getBoundingClientRect() で取得した矩形領域のオブジェクトは、 ブラウザのビューポートの左上端からの座標だから、 スクロールしているページの、 ビューポート内に入っている要素を参照する場合は、 getBoundingClientRect() の矩形領域が、 0 ～ ビューポート高さの範囲にある要素を選べばいい。 ──────────────── // ビューポート内にある img 要素 const activeimg = Array.from( document.getElementsByTagName( "img" ) ). filter( img => { const rect = img.getBoundingClientRect(); return ( rect.top > 0 ) && ( rect.bottom < window.innerHeight ); } ); ────────────────

ThanksImg質問者からのお礼コメント

ありがとうございます！だいぶ綺麗になりました！

お礼日時：1/27 17:31