$ (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 개의 요소로 화면의 성능 저하를 볼 수는 없었습니다. 그리고 각 기능 대신 this에서 el를 사용 : [win = $(window) 전]

봅니다 변수로 window 객체를 캐시합니다.

jQuery를 사용하여 직접 CSS를 변경하는 대신 클래스를 추가/제거해보십시오.

스크롤을 멈추기 전까지는 다른 사람이 언급 한 것처럼 비난하지 마십시오. 당신이 찾고있는 것은 throttling입니다.

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