jQuery detect when scrolling stopped.

Question

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>

Pete · Accepted Answer · 2018-04-27 14:44:02Z

1

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

answered Apr 27, 2018 at 14:44

Pete

58.8k31 gold badges132 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery detect when scrolling stopped.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related