JavaScriptで、対象座標に位置する要素を取得

Question

前提・実現したいこと

javascriptで、画面上の対象座標に位置する要素を取得する為に
「document.elementFromPoint(x,y)」を使用していますが
この関数は、画面表示（可視領域）内の要素のみ取得可能な仕様となっています。

発生している問題

画面表示（可視領域）外の要素を取得することができないので
取得する方法がないか探しています。

補足情報

ブラウザは、chromeです。
「document.elementFromPoint(x,y)」にはこだわりません。

Answer 1

getBoundingClientRectで各HTML要素の位置を把握して
指定座標がtop/bottom,left/rightの間に有るものを抜き出してみては？

Comments

[yambejp]

<style>
.dummy{height:200px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('body *').forEach(x=>{
var r=x.getBoundingClientRect();
console.log([x.nodeName,r.left,r.top,r.right,r.bottom]);
});
});
</script>
<div class="dummy">dummy</div>
<div class="dummy">dummy</div>
<div class="dummy">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="dummy">dummy</div>
<div class="dummy">dummy</div>

[kkitoh]

yambejpさん
ありがとうございました。無事解決しました。