Clever Geek Handbook

Scrolling through multiple items / DIVs

I would like to scroll through several sections at the same time.

I have something that works, but it doesn't work on slow machines (especially mobile phones)

<!-- 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

I can see that when I scroll an element, it scrolls other elements of the same class, but since I set a scroll listener in that class, the function fires again for each of the other elements because they are scrolled using the scrollLeft method.

Does anyone have any ideas on how I can improve this?

+3


source to share


4 answers


You can use the following snippet: {needs some tests, not sure if it handles all cases}



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


source


You can disable the scroll handler from all elements before calling scrollLeft()

and then re-enable the scroll handlers. This will prevent the handler from being called again.



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);
+1


source


Could you just scroll through the items that are in position scrolling?

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


source


I think the biggest problem is that you are triggering a scroll event on the element that you hooked up an event listener to, inside the event listener. If you exclude it from the scrolling items, you get a big performance boost on low hardware:

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


source






More articles:


All Articles