javascript - 使 JavaScript 图像在滚动时移动更流畅

Question

我有一张背景图片，它会在滚动时移动。当页面滚动到顶部时，背景图像的上边缘接触窗口的上边缘，当向下滚动 100% 时，图像的底部边缘接触窗口的底部边缘。

这是我的工作代码:

document.addEventListener('scroll', function() {
    var backgroundImage = document.querySelector('#background img');
    var scrollHeight = document.body.scrollHeight;
    var scrollTop = document.body.scrollTop;
    var innerHeight = window.innerHeight;

    backgroundImage.style.top = (((backgroundImage.scrollHeight - innerHeight) / 100) * ((scrollTop / (innerHeight - scrollHeight)) * 100)) + 'px';
});

结果如我所料，但滚动变得非常缓慢。有没有可能让这个动画更流畅？

编辑

我像这样添加了 requestAnimationFrame:

document.addEventListener('scroll', function() { requestAnimationFrame(process); });

function process() {
    // calculation code goes here
}

这使得滚动更加流畅，图像移动也非常完美。但是 DOM 仍然不是很流畅地滚动。更好，虽然不是很好。有进一步改进的想法吗？

Answer 1

使用 CSS 转换可能会有所帮助...我在这里使用 3d 转换，希望能为您提供更多性能，感谢 hardware acceleration .

代码看起来像这样:

var updateImgPosition = function  () {
    var backgroundImage = document.querySelector('#background img');
    var scrollHeight = document.body.scrollHeight;
    var scrollTop = document.body.scrollTop;
    var innerHeight = window.innerHeight;

    backgroundImage.style.webkitTransform = "translate3d(0,"+ (((backgroundImage.scrollHeight - innerHeight) / 100) * ((scrollTop / (innerHeight - scrollHeight)) * 100)) + "px,0)"

};

document.addEventListener('scroll', updateImgPosition)

UPDATED DEMO