スクロールして要素が表示されるたびに１ずつカウントする

Question

こんにちは。JS初心者なので質問させていただきます。
ワードプレスで写真家のウェブサイトを制作していて、各プロジェクトの記事には写真が複数枚あり、各プロジェクトごとに写真の合計数は変わります。
ページのデザインは、余白を使って写真をランダムにグリッドで並べるデザインです。

＊＊＊実現したい事＊＊＊

スクロールして写真がビューポート内に入るとカウントを１足していき、次の写真がビューポート内に入ると２と表示されていく機能を実装したいです。例）01(カウント)/20(合計数), 02/20, 03/20, 04/20

記事に登録されている写真の合計数は取得できました。
そして各写真をターゲット要素にして、それぞれの要素のトップの高さも取得できましたが、この後どのようなコードを書いていいのかわからず手が止まっている状態です。。。
ロジックやご指摘、アドバイスなどをいただけると幸いです。
よろしくお願いします。！

＊＊＊追記＊＊＊

２枚目の写真と説明を加えます。右端の01/20はfixedなのでスクロールしても固定されてついていきます。
img２の２０ー４０％くらいが画面内に入ったらカウントは”２”。
さらにスクロールをして、img３の２０ー４０％くらいが画面内に入ったらカウントは”３”
このようなイメージでカウントをしていきたいと思っています。

もし一番下までスクロールしてimgがもうない場合（合計数に達した場合）は、カウントは止まります。

下から上にスクロールした場合（上に戻る、逆スクロール）は、カウント数は減らしたいです。例）06/20、05/20、04/20、03/20、02/20,,,

実装したいイメージと近い記事を見つけました。Intersection Observer

          <!--single-post.php-->

           <?php if ($portfolioGallery) : ?>
              <div class="picture__counter">
                <div class="counter__inner">
                  <span class="count">01 / </span> // ここにスクロールして要素がビューポートに入るたびに１ずつカウント足される
                  <span class="total_num"> <?php echo count($portfolioGallery); ?> </span> // 合計数を取得
                  <a href="#container__top">
                    <span class="arrow__top"></span>
                  </a>
                </div>
              </div>
            <?php endif; ?>
          </div>

          <div class="project__photos">
            <?php if ($portfolioGallery) : ?>
              <?php foreach ($portfolioGallery as $index => $img) : ?>
                <?php if (in_array(($index % 10), [0, 3, 6, 9])) : ?>
                <?php endif; ?>
                <div class="photo <?php echo 'gallery__image--' . ($index % 10) . ' ' . $size; ?>">
                  <?php $size = ($img['width'] / $img['height'] > 1) ? 'about_landscape' : 'about_portrait';
                  echo wp_get_attachment_image($img['ID'], $size, false, ['class' => 'gallery__image--' . ($index % 10) . ' ' . $size]);
                  ?>
                </div>
              <?php endforeach; ?>
            <?php endif; ?>
          </div>

  /* main.js */

  let countTarget = $('.photo');         // ターゲット要素 
  let countNum = $('.count');            // カウント表示 0, 1, 2, 3, 4, 5,,,, 合計数までカウントする
  let totalNum = $('.total_num').text(); // 合計数 => 13, 20, 10 etc...

  $(countTarget).each(function (index, ele) {
    let targetContentsTop = $(ele).offset().top;
    console.log(targetContentsTop); //　各要素のトップの高さも取得 -> 946.91650390625,,,

    // console.log(`index is ${index + 1}`); // 後でこのインデックス番号を変数countに追加して書き換えたい
    // let arr = [];
    // arr.push(ele)
    // console.log(arr)　// Array [ div.photo.gallery__image--0 ],,,
  })

Comments

[yambejp]

> 写真がビューポート内に入ると

少しでも表示されたらですか？全部表示されたらですか？（もしくは○○%以上表示されたらとか）
スクロールして上に消えていった場合、もしくは逆スクロールして下に消えた場合
カウント数は減らないのでしょうか？

[tomtom199]

要素の２０ー４０％くらいが画面内に入ったらカウントしたいと考えています。
スクロールしていき要素が上に消えても、次の要素が下から来るのでそれを数えていく実装をしたいと思っています。
逆スクロールした場合はカウント数は減らしたいです。

これらを追記で加えますね。ありがとうございます！

Answer 1

• Intersection Observer API - Web API | MDN

を利用することになると思いますが、仕様がわからないので具体的には回答できません

Comments

[tomtom199]

調べて読んでみます。もし参考になるサイトや記事を知っていたら共有していただけると助かります。
アドバイスありがとうございます！

Answer 2

要素が画面に入っているかを判定するのは
offsetとscrollをゴニョゴニョするより
getBoundingClientRectを使うのがシンプル

素直に要素が画面に入ったり出たりするたびにカウントを増減させるより
今フォーカスされている画像の中の最後のものが何個目の画像なのかで判定する方が割と確実

あらかじめ各画像のdatasetにインデックスを入れておけば都度数える処理も省略できて省エネ

Comments

[tomtom199]

コメントありがとうございます。

>> 今フォーカスされている画像の中の最後のもの

私の知識不足でこの文が曖昧なので、もう少し詳しく噛み砕いて説明していただけるととても助かります。
すでにループ内で各要素のインデックス番号は取得できているので、それら１つ１つの要素に対して、画面内に入ったらそのインデックス番号を追加しようと考えていました。datasetとの違いはありますか？

[KazuhiroHatano]

フォーカスされているというは単純に画面に要素全体が入っているとか
要素が画面の中央にいるとかそういう意味合いで言ってます

IE対応が要件じゃないならyambejpさんのいうIntersectionObserverを使った方がいいです
シンプルに画面に入っているかどうかを判定できます

画面に入っている要素はアコーディオン開閉など要素のサイズの変更など
scroll以外でも変わりうるのでscrollイベントで判定を更新するのはあまり確実ではありません
またscrollイベントは発生した場合連続でフレームレート以下の間隔でも発生するので
この手のミリ秒単位でタイムラグがあっても気にならないような反復処理は
0,1秒間程度のsetIntervalでしてしまった方が確実で省エネだったりします

[KazuhiroHatano]

datasetにはphpでレンダリングする段階で data-index="<?=$index?>" みたいな感じで入れられるので
jsで要素数をカウントするようなことをせずに済みます
datasetに入れる形にした方がjsで値の取り出しが楽ってのもあるんですが
jQueryだと多分あんまり変わらないですね

[tomtom199]

お返事が遅くなってしまいすいません。丁寧な説明ありがとございます。
IE対応はしなくていいので、IntersectionObserverを使って、要素が画面内に入ったらアニメーションさせて表示させる簡単な実装をしてみたところうまく動きました。これを要素のインデックス番号とカウント表示に連動させて試してみます。ありがとうございました！

解決できた場合は、後日ここにコードも載せますね。