使用JS修复背景位置时出现卡顿问题

问题重现 #

为实现视差效果，通过JS控制CSS变量设置div的背景位置（background-attachment无法满足需求），但背景位置有时无法立即更新，效果卡顿。

现有代码 #

CSS：

.box {
    width: 100%;
    height: 1000px;
    background-image: url("e4AAAgCw3OA-960.jpg");
    background-size: cover;
    background-position-y: var(--check);
}

JS：

function parallax() {
    document.body.style = `--check: ${window.pageYOffset}px`;
}

window.addEventListener('scroll', (e) => {
    parallax();
});

尝试过window.scrollY替代window.pageYOffset，问题仍存在。

解决思路 #

1. 用requestAnimationFrame同步渲染周期 #

浏览器按帧执行重绘重排，直接在scroll事件里更新样式可能错过当前帧。将更新逻辑放入requestAnimationFrame，让样式更新与浏览器渲染节奏同步：

function parallax() {
    document.body.style.setProperty('--check', `${window.scrollY}px`);
}

window.addEventListener('scroll', () => {
    requestAnimationFrame(parallax);
});

2. 避免覆盖body的全部内联样式 #

原代码用document.body.style = --check: ...``会覆盖body上其他内联样式，改用setProperty单独设置变量，减少不必要的样式重置开销：

function parallax() {
    document.body.style.setProperty('--check', `${window.scrollY}px`);
}

3. 节流控制scroll事件触发频率 #

scroll事件滚动时会高频触发，过多的样式更新会导致卡顿。用节流逻辑限制更新频率，确保每帧只执行一次：

let ticking = false;
function parallax() {
    document.body.style.setProperty('--check', `${window.scrollY}px`);
    ticking = false;
}

window.addEventListener('scroll', () => {
    if (!ticking) {
        requestAnimationFrame(parallax);
        ticking = true;
    }
});

4. 开启硬件加速提升渲染效率 #

给.box添加will-change或transform属性，让浏览器将元素放入GPU层渲染，优化动画流畅度：

.box {
    width: 100%;
    height: 1000px;
    background-image: url("e4AAAgCw3OA-960.jpg");
    background-size: cover;
    background-position-y: var(--check);
    will-change: background-position; /* 告知浏览器属性会变化，提前优化 */
    /* 或者使用 transform: translateZ(0); 强制开启硬件加速 */
}

5. 直接操作目标元素样式 #

跳过全局CSS变量，直接修改.box的backgroundPositionY属性，减少变量传递的潜在延迟：

const box = document.querySelector('.box');
function parallax() {
    box.style.backgroundPositionY = `${window.scrollY}px`;
}

window.addEventListener('scroll', () => {
    requestAnimationFrame(parallax);
});

内容的提问来源于stack exchange，提问作者JabeGreen