CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Jonathan
Jonathan

Reputation: 2021

jQuery - fast scrollTop animation stutters

I have two nested containers. When scrolling the outter div, I want the inner div to be scrolled instead. Inner div scroll behaviour shall not be affected but work as is.

When applying $.animate on the scrollTop attribute of the inner div (#list), it works fine, when scrolling step-by-step. However, fast scrolling makes the whole thing stuttering. I'm sure this is correct by design. Does anyone know how to approach this?

I'd expect it to "jump" over the steps, when fast scrolling..

https://jsfiddle.net/3oktzo7g/1/

  $('#list').stop().animate({
     scrollTop: $('#list').scrollTop() - 100
  }, 150, 'linear');

Upvotes: 1

Views: 577

Answers (1)

Jonathan
Jonathan

Reputation: 2021

I came accross the documented solution!

Using the stop()-functions parameters (true,true) will finish the previous animation instantly.

$('#list').stop(true,true).animate({
   scrollTop: $('#list').scrollTop() - 100
}, 150, 'linear');

Upvotes: 1

Related Questions