JavaScriptにおけるfunctionの使いまわしについて

Question

該当のソースコード

<div id="exampleId01">
</div>
<div id="exampleId02">
</div>
<div id="exampleId03">
</div>

.fadeIn_LeftToRight {
    animation-name: fadeIn;
    animation-fill-mode: forwords;

}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateX(-100px);
     }

     100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

LeftToRight("exampleId01");

LeftToRight("exampleId03");

function LeftToRight(elm) {
  let targetElement = document.getElementById(elm);

window.onscroll = function()
{
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    var bottom = scrollTop + document.documentElement.clientHeight;

    var top = targetElement.offsetTop;

    if( top < bottom )
    {
        document.getElementById(elm).class list.add("fadeIn_LeftToRight");
    }
}

}

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

スクロールに応じて要素をフェードインで表示させるコードを実装したいです。
上記のように関数(LeftToRight())を作成して引数にて要素を指定しようとする場合、一回だけの呼び出し(1要素の指定)では無事に動作するのですが、別の要素にも適用させる為に2回呼び出しすると2回目に呼び出した際の要素にのみスタイルが当たってしまい思ったとおりの実装になりません。

最終的にはスクロールに応じて交互に左右からフェードインするようにしたいです。
→
←
→
←

Answer 1

window.onscrollは1つしかありませんので、後からセットしたものに上書きされてしまいます。

同じイベントに複数のハンドラをセットしたい場合、addEventListenerを使いましょう。

window.addEventListener('scroll', function(){ /* 略 */ }, false);

Answer 2

処理内容が同じなのであれば、同じclassを与えてそのclassに対してscrollイベントを付与すれば良いのではないでしょうか。