jQuery检测滚动何时停止

Question

我在这里有一个简单的演示，我有两个单独的滚动容器。

我正在使用jQuery将滚动从一个容器复制到另一个容器，因此当一个容器滚动时，另一个容器会做相同的滚动。

这可能是生干的，有时每个容器中的元素都不会排队。

如果我可以检测到滚动何时停止，我认为我可能能够确保每个滚动条在每个。

我如何能够检测滚动何时停止，以便我可以在每个容器上设置滚动条。

  $('.scroll-top').on('scroll', function() {
    var val = $(this).scrollLeft();
    $('.scroll-bottom').scrollLeft(val);
  });
$('.scroll-bottom').on('scroll', function() {
    var val = $(this).scrollLeft();
    $('.scroll-top').scrollLeft(val);
  });

.wrapper{
  border: 2px solid grey;
  padding: 5px;
  width: 500px;
  margin: 0 auto;
}
.scroll-top,
.scroll-bottom{
  overflow-y: scroll;
}
.content{
  display: flex;
  width: 1000px;
  height: 100px;
}
.content .block{
    background: red;
    width: 50px;
    height: 100px;
    margin-right: 10px;
}  
.content-top{
  margin-bottom: 2px;
}
.scroll::-webkit-scrollbar { 
  display: none;
}
.scroll { 
  -ms-overflow-style: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="scroll-top scroll">
    <div class=" content content-top">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>
  <div class="scroll-bottom scroll">
    <div class=" content content-bottom">
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
      <div class="block block-1"></div>
    </div>
  </div>  
</div>

Answer 1

您可以使用 settimeout，以便动画在结尾只发射一次：

var timeoutVar;
$('.scroll-bottom').on('scroll', function() {
    var $this = $(this);
    clearTimeout(timeoutVar);  // clear timeout so it is not fired if still scrolling
    timeoutVar = setTimeout(function() {
      var val = $this.scrollLeft();
      $('.scroll-top').scrollLeft(val);
    }, 100); // 100ms should be long enough so that this will only be fired after the scroll has finished
  });