CODEWITHSUNDEEP
jquery
ttmt
ttmt

Reputation: 4986

jQuery detect when scrolling stopped.

I have a simple demo here where I have two separate scrolling containers.

I'm using jQuery to copy the scrolling from one container to the other so when one is scrolled the other does the same.

This can be jerky and sometimes the elements in each container don't line up.

If I can detect when scrolling has stopped I thought I might be able to ensure the scrollLeft is the same on each.

How would I be able to detect when scrolling has stopped so I can set the scrollLeft on each container.

  $('.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>

Upvotes: 0

Views: 48

Answers (1)

Pete
Pete

Reputation: 58462

You could use a settimeout so that the animation only fires once at the end:

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
  });

Upvotes: 1

Related Questions