javascript - 在 JQuery 中使用 ScrollTop 制作动画时滚动卡顿

Question

我正在尝试为 ScrollTop 设置动画并遇到 Jank 的一些问题。

这是我目前的脚本。在滚动浏览器时，我正在滚动“花式滚动”的 div 非常笨拙。

不幸的是，我无法链接到开发站点，因为它是针对客户的，但以下是它的所有代码。滚动条似乎可以很好地滚动，但鼠标滚动却令人难以置信。

任何帮助将非常感激。

$(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 中的 margin-top 也有很大帮助。