スクロール時に画面内にある不特定のタグを取得する方法

前提・実現したいこと

初心者です。
ブラウザ内をスクロールし、画面に入ってきた要素を取得する方法を模索しております。
ヒートマップのような仕組みをjqueryで作成しており、スクロールして表示された要素すべてを取得したいと考えております。
そのため、id,class,tagName等で要素を限定することができません。

追記

ソースコード内に実行を試みたソースを追記しました。

ソースコード

jquery
1$(window).on('resize load scroll', function(){
2  var win_scr = $(window).scrollTop();
3  var win_h = $(window).height();
4  var elem = $('body').find('*'); //すべての要素が取得できることを確認
5　var elem_pos = elem.offset().top; //body内最初の子要素のoffsetTopを取得する  .....課題1
6
7　//scrollで画面内の判定
8  if(elem_pos - win_h > win_scr && elem_pos < win_h) { //elemが画面内に入ったとき、elem_posが画面の高さより小さいとき
9    //課題：このときのelem_posが取れないので判定ができず下記が実行されない
10    elem.each(function() { //elemに対して
11       var t = $(this); //win_h内に入った要素をthisに入れる  .....課題2
12       t_tag = t[0].tagName; //DOMにしてtag名を取得
13       console.log(t_tag); //tag名を表示
14    }
15  }
16}
17

課題

課題１：elem_posを条件式に使いたいが、ここで取れるのはbodyの最初の要素だけ。
課題2:$(this)がwin_h内に入った要素を取得できていない

拙い説明ですが、よろしくお願いいたします。

kei344

2018/06/06 07:08

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

biggee

2018/06/06 07:59

ありがとうございます。追記しました。

行動規範の内容に同意します

回答1件

IntersectionObserverで取得できます。

JavaScript
1$(function() {
2  let observer = new IntersectionObserver(function(entries, observer) {
3    for (const entry of entries) {
4      if (entry.intersectionRatio > 0) {
5        console.log(entry);
6      }
7    }
8  });
9
10  $('body').find('*').each(function(index, element) {
11    observer.observe(element);
12  });
13});