Search code examples
javascriptjqueryscrolltopjank

Scroll jank when animating using ScrollTop in JQuery

I am trying to animate a ScrollTop and running into a few issues with Jank.

This is my script at the moment. On scroll the browser, the div that i'm scrolling 'fancy-scroll' is quite janky.

Unfortunately i can't link to the dev site as it's for a client, but the below is all the code for it. It seems to scroll fine with the scrollbar, but is incredibly janky with the mouse scroll.

Any help would be much appreciated.

$(document).ready(function(e){
  $(window).scroll(function(e) {
      e.preventDefault();
         $('.fancy-scroll').stop().css({
              'top': +($(this).scrollTop() / 1) + "px"
          });
  });
});
Solution

  • I kind of fixed it by using the following:

    $(document).ready(function(e){ $(window).scroll(function(e) { e.preventDefault(); $('.fancy-scroll').stop().css({ //'top': +($(this).scrollTop() / 1) + "px" 'transform': 'translateY( ' + (+($(this).scrollTop() / 5)) + 'px)', }); }); });

    Also removing the margin-top i had in the CSS helped a lot.