Обнаружение элементов анимации в представлении

Question

Я пытаюсь добавить класс к элементу, когда он находится в окне просмотра. Я достиг этого, но это вызывает серьезные проблемы с работой моего сайта при прокрутке.

настоящее время у меня этот JavaScript:

//Cache reference to window and animation items 
var $animation_elements = $('.animation-element'); 
var $window = $(window); 

$window.on('scroll resize', check_if_in_view); 
$window.trigger('scroll'); 

function check_if_in_view() { 
var window_height = $window.height(); 
var window_top_position = $window.scrollTop(); 
var window_bottom_position = (window_top_position + window_height); 

$.each($animation_elements, function() { 
var $element = $(this); 
var element_height = $element.outerHeight(); 
var element_top_position = $element.offset().top; 
var element_bottom_position = (element_top_position + element_height); 

//check to see if this current container is within viewport 
if ((element_bottom_position >= window_top_position) && 
    (element_top_position <= window_bottom_position)) { 
    $element.addClass('in-view'); 
} else { 
    $element.removeClass('in-view'); 
} 
}); 
} 

Так как вы можете видеть, функция check_if_in_view(), кажется, постоянно стреляя время загрузки страницы прокручиваются, и я считаю, что это может быть причиной того, что производительность может быть так Плохо.

Есть ли более эффективный способ добавления класса при прокрутке страницы, которая не вызывает проблем с производительностью на моем сайте?

Answer 1

Использовать setTimeout для задержки вызова функции каждый раз, когда происходит событие scroll. В следующем коде (который я заимствовал from Codrops), флаг установлен для вызова функции каждые 60 миллисекунд в случае непрерывной прокрутки.

function Scroller(el) { 
    this.elements = Array.prototype.slice.call(el); 
    this._init(); 
} 

Scroller.prototype = { 
    _init : function() { 
     //this flag prevents that the function _scrollPage is called 
     //every time the 'scroll' event is fired 
     this.didScroll = false; 
     window.addEventListener('scroll', this._scrollHandler.bind(this), false); 
    }, 
    _scrollHandler : function() { 
     if(!this.didScroll) { 
      this.didScroll = true; 
      setTimeout(function() { this._scrollPage(); }, 60); 
     } 
    }, 
    _scrollPage : function() { 

     this.elements.forEach(function(el, i) { 
      if(inViewport(el)) { 
       classie.add(el, 'i-am-in-the-viewport'); 
      } 
      else { 

       classie.remove(el, 'i-am-in-the-viewport'); 
      } 
     }); 
     this.didScroll = false; 
    } 
}; 

Чтобы использовать его, позвоните по телефону new Scroller(document.getElementsByClassName('elements-to-watch'));.

Ознакомьтесь с полным кодом на Codrops, чтобы увидеть реализацию функции inViewPort(). Classie.js используется для обработки присвоений имен классов.

Не бойтесь просить разъяснений, если есть что-то, чего вы не получите!