【问题标题】: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 也有很大帮助。

【讨论】:

    猜你喜欢
    • 2017-01-08
    • 2013-08-30
    • 1970-01-01
    • 1970-01-01
    • 2013-05-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多