cssのtransformを入れるとスクロールが止まってしまう

いつもお世話になっております。
現在、jQueryとcssを使ってスクロールをした時に、ふわっと表示させるアニメーションの実装を行っています。

実装自体は出来ているのですが、スクロールをしている途中に、スクロールが止まってしまう事象にあってしまい困っております。
下記が実装のコードです。

css

.c-fadein {
  opacity : 0;
  transition: transform 0.5s, opacity 0.5s;
  transform: translateY(30px);
  will-change: transform;

  &.c-scrollin {
    opacity : 1;
    transform: translateY(0);
  }
}

ｊｓ

window.addEventListener('DOMContentLoaded', function () {
  scrollIn();
});

function scrollIn(){
  scrollInEvent();
  var timer = false;
  $(window).scroll( function(e){
    if(timer !== false){
      clearTimeout(timer);
    }
    timer = setTimeout(function(){
      scrollInEvent();
    }, 50);
  });
}

function scrollInEvent(){
  var distance = 200;
  $('.c-fadein').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight + distance){
      $(this).addClass('c-scrollin');
    }else {
      $(this).removeClass('c-scrollin');
    }
  });
}

希望通りの動作にはなっているのですが、添付の画像のようにスクロールを行ったり来たりさせていると、急にスクロールバーが伸びて、スクロールが止まってしまいます。

will-change を設定してみると良いとか、

-webkit-backface-visibility:hidden;,backface-visibility:hidden; を設定してみたり、 translateY を translate3d にしてみたりと、いろいろと試してはみたのですが、どうしても解決が出来ません。

どなたか、同じような事象にあわれた方がいらっしゃいましたら、お知恵を拝借頂けますと幸いでございます。
よろしくお願いいたします。