网页视差背景滚动时抖动问题及优化方案咨询

问题描述 #

做了个人网站，给页面body加了垂直重复的六边形背景视差效果——背景滚动速度比页面内容慢，但在部分设备、浏览器或者窗口尺寸下，背景会上下抖动，触发条件没规律。

当前实现的代码如下：

CSS 代码 #

body {
   background: #fff9ed;
   background-image: url("hexagon-side.png"), url("hexagon-side.png");
   background-position: 0px 0px, 100% 0px;
   background-repeat: repeat-y, repeat-y;
}

JavaScript 代码 #

window.addEventListener('scroll', function() {
   let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
   var currentOffset = '0px ' + scrollTop / 1.2 + 'px, 100% ' + scrollTop / 1.2 + 'px';
   document.getElementById("parallax").style.backgroundPosition = currentOffset;
});

HTML 结构 #

<body id="parallax">

问题诱因 #

1. 像素精度不统一：scrollTop / 1.2会算出小数像素，不同浏览器对小数像素的渲染逻辑不一样——有的舍入、有的插值，背景偏移时就会出现抖动。
2. 滚动事件太频繁：scroll事件触发次数极多，每次都直接改DOM样式，容易造成渲染队列阻塞，背景更新跟不上滚动节奏，视觉上就抖了。
3. 浏览器渲染机制差异：高DPI屏幕、窗口缩放时，不同浏览器的像素对齐规则不同，也会导致背景偏移出现不一致的抖动。

抖动修复方案 #

1. 强制像素取整：把计算后的偏移值转成整数，避免小数像素的渲染差异：

window.addEventListener('scroll', function() {
   let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
   // 取整确保是整数像素
   let offset = Math.round(scrollTop / 1.2);
   var currentOffset = `0px ${offset}px, 100% ${offset}px`;
   document.getElementById("parallax").style.backgroundPosition = currentOffset;
});

2. 同步浏览器渲染周期：用requestAnimationFrame让样式更新和浏览器重绘同步，减少不必要的渲染：

let ticking = false;
window.addEventListener('scroll', function() {
  if (!ticking) {
    window.requestAnimationFrame(function() {
       let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
       let offset = Math.round(scrollTop / 1.2);
       var currentOffset = `0px ${offset}px, 100% ${offset}px`;
       document.getElementById("parallax").style.backgroundPosition = currentOffset;
       ticking = false;
    });
    ticking = true;
  }
});

3. 开启GPU加速：给body加will-change属性，提示浏览器把背景放到合成层渲染，提升性能：

#parallax {
  will-change: background-position;
}

更优实现方案：纯CSS+轻量JS视差 #

不用频繁操作DOM，用CSS原生特性配合少量JS实现，性能更稳定：

body {
   background: #fff9ed;
   background-image: url("hexagon-side.png"), url("hexagon-side.png");
   background-position: 0px calc(0% - var(--scroll-offset) * 0.2), 100% calc(0% - var(--scroll-offset) * 0.2);
   background-repeat: repeat-y, repeat-y;
   background-attachment: fixed;
}

然后用JS更新CSS变量（比直接改样式高效）：

window.addEventListener('scroll', function() {
  document.documentElement.style.setProperty('--scroll-offset', window.pageYOffset);
});

这种方式靠浏览器原生合成层处理，渲染更流畅，基本不会出现抖动问题。

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