Прокрутка нескольких элементов/DIVs

Question

Я бы хотел прокрутить несколько div в одно и то же время.

У меня есть то, что работает, но это не производительное на медленных машины (мобильные особенно)

<!-- HTML --> 
<div class="container"> 
    <div class="row"> 
     <div class="scroller"> 
      <div>some really long content that just keeps going on and on and on and on and on and on and on and on and on and on and on and on and on</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="scroller"> 
      <div>some really long content that just keeps going on and on and on and on and on and on and on and on and on and on and on and on and on</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="scroller"> 
      <div>some really long content that just keeps going on and on and on and on and on and on and on and on and on and on and on and on and on</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="scroller"> 
      <div>some really long content that just keeps going on and on and on and on and on and on and on and on and on and on and on and on and on</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="scroller"> 
      <div>some really long content that just keeps going on and on and on and on and on and on and on and on and on and on and on and on and on</div> 
     </div> 
    </div> 
</div> 
<style> 
/* CSS */ 
    .container { width:300px; } 
    .scroller { width:100%; height:40px; padding:0 0 16px; line-height:40px; overflow-x:auto; overflow-y:hidden; white-space:nowrap; } 
</style> 

<script> 
// jQuery 
$(".scroller").scroll(function(){ 
    $(".scroller").scrollLeft($(this).scrollLeft()); 
}); 
</script> 

Here's a pen/demo

Я могу видеть, что whevever прокручивает элемент, что она прокручивается другой элементы того же класса, но поскольку я установил «слушатель» прокрутки в этом классе, функция снова срабатывает для каждого из других элементов, поскольку они прокручиваются с помощью метода scrollLeft.

Есть ли у кого-нибудь идеи, как я могу это улучшить?

Answer 1

Вы можете использовать следующий фрагмент кода: {нужно несколько тестов, не уверен, что он обрабатывает все случаи}

$(".scroller").css('outline', 0).attr('tabindex' , -1).scroll(function(e){ 
    if (!$(this).is(':hover') && !$(this).is(':focus')) return; 
    $(".scroller").not(this).scrollLeft($(this).scrollLeft()); 
}); 

Answer 2

Вы можете отключить обработчик прокрутки всех элементов перед вызовом scrollLeft() повторно включить обработчики прокрутки после , Это предотвратит повторный вызов обработчика.

var scrollHandler = function(){ 
    var $scrollers = $(".scroller"); 
    $scrollers.off("scroll", scrollHandler); 
    $scrollers.scrollLeft($(this).scrollLeft()); 
    setTimeout(function(){$scrollers.on("scroll", scrollHandler);}, 0); 
} 

$(".scroller").on("scroll", scrollHandler); 

Answer 3

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

$(".scroller").scroll(function(e){ 
    $(".scroller").not(this).scrollLeft($(this).scrollLeft()); 
}); 

Answer 4

Не могли бы вы просто только прокручивать элементы, которые оттиск позиция отличается?

$(".scroller").on('scroll', function(event){ 
    var a = $(this).scrollLeft(); 
    $(".scroller").each(function(){ 
    var b = $(this).scrollLeft(); 
    if(a !== b){ 
     $(this).scrollLeft(a); 
    } 
    }); 
});