是否有可能在.scroll事件上提高.css方法的速度？

Question

这是我的代码：

$( window ).scroll( function () {
    scrollBG( '#about' );
}

function scrollBG( e ) {
  bg_position = $( document ).scrollTop() / 2;
  $( e ).css( 'background-position-y', bg_position );
}

它的作用是在用户滚动时滚动元素的背景。 这很好用，唯一的问题是当使用鼠标滚轮滚动时，css需要几毫秒才能赶上（因为鼠标滚轮一次会移动100px）。

有没有办法让css瞬间发生变化？ 也许原生JavaScript更快？

我注意到这个插件没有我面临的问题，但我不想使用它，因为它似乎对我的需求有些过分：http://johnpolacek.github.io/superscrollorama/

Answer 1

实际上没有，滚动事件每秒只会被限制一次。 首先 - 尝试将背景附件设置为固定。 第二 - 尽可能使用requestAnimationFrame，而不是jQuery $（window）.scroll方法。

Answer 2

有几点想法：

• 您对要维护的元素有其他css规则吗？如果不直接设置样式属性可能会更快。

• 正如Kevin B在评论中所建议的那样，你可以延迟背景的实际移动，并可能使位置的移动动画化，使移动不那么刺耳。