在 JQuery 中使用 ScrollTop 设置动画时滚动卡顿

Question

我正在尝试将 ScrollTop 和运行动画化为 Jank 的几个问题。

这是我现在的脚本。在滚动浏览器时，我正在滚动 'fancy-scroll' 的 div 非常卡顿。

不幸的是，我无法 link 访问开发站点，因为它是针对客户端的，但下面是它的所有代码。使用滚动条似乎可以很好地滚动，但是使用鼠标滚动时却非常卡顿。

如有任何帮助，我们将不胜感激。

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

Answer 1

我使用以下方法修复了它：

$(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)', }); }); });

同时删除我在 CSS 中的边距顶部帮助很大。

在 JQuery 中使用 ScrollTop 设置动画时滚动卡顿

Scroll jank when animating using ScrollTop in JQuery

javascript

jquery

scrolltop

jank