[Javascript]画面スクロール時に要素をfadeInさせる

Question

前提・実現したいこと

画面をスクロールしたときに可視した要素をフェードインさせて表示させたいです。

発生している問題・エラーメッセージ

一番上の要素に到達したときにまだ見えていない他の要素もフェードインしてしまいます。
それぞれをばらばらにフェードインさせたいです。

該当のソースコード

<div class="home-content wrapper">
      <div class="content"><img src="img/flower.jpg"></div>

        <div class="content"><h2>About<h2><p></p> </div>

          <div class="content"><h2>Chapel<h2></div>

        <div class="content"><img src="img/chapel.jpeg"></div>

        <div class="content"><img src="img/beach.jpg"></div>

          <div class="content"><h2>Service<h2> <p></p></div>
</div>

.home-content{
  display: grid;
  grid-template-columns: 1fr 1fr;

}
.content{
  opacity: 0;
  transition: all 2s;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  -ms-transition: all 2s;

}
.fadein{
  opacity: 1;
}

$(function(){
  $(window).scroll(function(){
    const scroll=  $(window).scrollTop();
    const windowHeight=  $(window).height();
    $(".content").each(function(){
      const imgPos=$(this).offset().top;

      if(scroll>imgPos-windowHeight)
      {
        $(this).addClass("fadein");
      }
      
    });
  });
});

補足情報（FW/ツールのバージョンなど）

エディター：Atom、ブラウザ：chrome

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、.content は2つずつ表示されました。
つまり、「まだ見えていない他の要素もフェードイン」という問題が再現しませんでした。

ご提示いただいていない部分に原因があると思われます。

[ryoma26]

自分も同じようにここに書いてあるコードだけで実装してみたのですがやはりうまく行きませんでした。環境の要因などがあるのでしょうか？

[Lhankor_Mhy]

サンプルを作りました。

https://jsfiddle.net/Lhankor_Mhy/zr9yw2ud/

このサンプルは、当方の環境では、.content は2つずつ表示されますが、いかがですか？

[ryoma26]

IEでちゃんと実装されるのですが、chromではうまくいかないです。
何度も申し訳ないです。

[Lhankor_Mhy]

当方では、上記サンプルはChromeでも問題なく動いています。
ryoma26さんのChromeでは、上記サンプルは動作しないのですね？

であれば、環境の問題だと思います。