$（window）.scrollのより速い代替手段ですか？

Question

私は、$（window）.scrollのjQueryスクロールバインドがかなりの量のページを遅らせる傾向があることに気付きました。私は次のスクリプト使用して、それらを過ぎてスクロールしたときに例えば、私は私のページの変更スタイルの要素を持っている：

$(window).scroll(function() { 
    var bottom_of_window = $(window).scrollTop() + $(window).height(); 
    $('.ElementsToBeChanged').each(function() { 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
      if (bottom_of_window > bottom_of_object) { 
       //Add my styles 
      } 
     }); 

}); 

を、それは常にスクロール上で動作するので、それは当然のことながら、ウェブサイトはラグなりますが、私は遭遇していませんオブジェクトが過去にスクロールされたときのイベントをトリガする代替手段。スクロールでイベントを発生させるこの種のウェブサイトはかなり一般的です。この遅れを回避するために彼らは何を使用しますか？

Answer 1

あなたのパフォーマンスを低下させるのは、スクロール機能自体ではなく、すべてのスクロールイベントで各項目ごとに多くの計算を行っているという事実です。

でも、画面上の20個の要素でパフォーマンスが低下することはありませんでした。 [：win = $(window) EX]、代わりにthisの各機能からelを使用

は、変数として、あなたのwindowオブジェクトをキャッシュするようにしてください。

jQueryを使って直接CSSを変更するのではなく、クラスを追加/削除してみてください。

あなたがスクロールを止めるまでは発砲しないので、他の人に言われているように、denounceを使用しないでください。あなたが探しているのはthrottlingです。ここで

は私が思いついたものだし、それは私のPC上の20個の要素とうまく動作します：

var win = $(window); 
 

 
win.scroll(function() { 
 
    var bottom_of_window = win.scrollTop() + win.height(); 
 
    $('.ElementsToBeChanged').each(function(index,el) { 
 
      var bottom_of_object = $(el).offset().top + $(el).outerHeight(); 
 
      if (bottom_of_window > bottom_of_object) { 
 
       $(el).addClass('red'); 
 
      }else{ 
 
      \t \t $(el).removeClass('red'); 
 
      } 
 
     }); 
 

 
});

.ElementsToBeChanged{ 
 
    margin:100px; 
 
    height:200px; 
 
    border:1px solid black; 
 
    transition:2s; 
 
} 
 

 
.ElementsToBeChanged.red{ 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div> 
 
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>

最後に、ちょうどそのようなSkrollr.jsやScrollMagic