在 JQuery 中使用 ScrollTop 制作动画时滚动卡顿答案

【问题标题】：Scroll jank when animating using ScrollTop in JQuery在 JQuery 中使用 ScrollTop 制作动画时滚动卡顿
【发布时间】：2020-03-10 15:42:12
【问题描述】：

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

这是我目前的脚本。在滚动浏览器时，我正在滚动“fancy-scroll”的 div 非常卡。

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

任何帮助将不胜感激。

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

【问题讨论】：

看起来您正试图让.fancy-scroll 元素在页面滚动时保持在视口中的位置......？如果是这种情况，请使用 CSS，而不是 JS。具体来说，position: fixed
试图使内容从另一个 div 下方向下滚动。有点像视差，但在内容上而不是在背景图像上。

标签： javascript jquery scrolltop jank

【解决方案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 也有很大帮助。

【讨论】：