滚动多个元素/DIV

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

我可以看到，无论我滚动一个元素，它都会滚动同一个类的其他元素，但是因为我在该类上设置了一个滚动“侦听器”，所以该函数会再次为每个其他元素触发，因为它们已使用 scrollLeft 方法滚动。

有人知道我可以如何改进吗？

Answer 1

您可以使用以下 sn-p：{需要一些测试，不确定它是否能处理所有情况}

$(".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").on('scroll', function(event){
  var a = $(this).scrollLeft();
  $(".scroller").each(function(){
    var b = $(this).scrollLeft();
    if(a !== b){
      $(this).scrollLeft(a);
    }
  });
});

Answer 4

我认为最大的问题是，您在将事件侦听器附加到事件侦听器内部的元素上触发滚动事件。如果您将其从要滚动的元素中排除，您应该会在低硬件上获得很大的性能提升：

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