Chrome中的JQuery scrollTop动画波涛汹涌

Question

我有一个元素,我正在应用一些基于滚动位置的基本过渡.它在Safari和Firefox中按预期顺利运行,但在Chrome中滚动非常不稳定.

$(document).ready(function($) {
  var divUp = $('.fade');
  var divDown = $('.fade-down');
  $(window).on('scroll', function() {
    var st = $(this).scrollTop();
    divUp.css({ 
        'top'     : -(st/6)+"px", 
        'opacity' : 1 - st/400
    });
    divDown.css({
        'opacity' : 1 - st/400
    }); 
  });
});

我CSS单独评论了每个属性,但Chrome无论如何都是不稳定的.该top物业正在移动一个相对定位的元素.

如何在让Chrome的JS引擎满意的同时达到预期的效果？提前感谢您的任何反馈.

Answer 1

你正在经历布局颠簸.

更改元素的top属性会使当前布局无效.通常,这会提示浏览器异步(即不立即)重新计算布局.

但是,调用scrollTop 强制浏览器同步重新布局.因为您在滚动事件处理程序中调用它,所以在非常短的时间内重复发生.这种DOM写入读取序列是jank的已知原因.

要提高性能,您需要防止布局颠簸.更改CSS transform(和opacity)属性不会使浏览器的布局无效 - 它们只需要复合,这要快得多.

如果您设置动画transform: translateY而不是top浏览器,则无需在每个动画帧上计算昂贵的计算:

divUp.css({ 
  'transform': 'translateY( ' + (-(st/6)) + 'px)', 
  'opacity': 1 - st/400
});

您可以通过设置CSS will-change属性来帮助浏览器优化转换:

.your-div {
  will-change: transform;
}

进一步阅读:

• Jank free - 关于提高Web应用程序性能的文章
• CSS触发器 - 列出浏览器在更改每个CSS属性时需要采取的步骤