Chrome非整数devicePixelRatio下设置scrollLeft的问题及解决需求

当Windows显示缩放设为125%（对应devicePixelRatio=1.25）时，Chrome设置element.scrollLeft会自动将值近似为0.8的倍数——比如设置1实际得到0.8、设置2得到2.4、设置3得到3.2、设置4得到4。Firefox不存在这个问题，但Chrome的这种行为会导致容器滚动时内容视觉位置无法稳定，出现像素级抖动，且仅在非整数devicePixelRatio场景下触发。

以下是几种可行的解决方法：

方案1：主动校准scrollLeft值到浏览器对齐步长 #

Chrome的偏移逻辑是将scrollLeft对齐到1 / devicePixelRatio的倍数（1.25对应0.8），我们可以提前把目标值校准到这个步长上，避免浏览器自动修正带来的抖动。

function setStableScrollLeft(element, targetValue) {
  const dpr = window.devicePixelRatio || 1;
  const alignStep = 1 / dpr;
  // 将目标值校准到最近的步长倍数
  const calibratedValue = Math.round(targetValue / alignStep) * alignStep;
  element.scrollLeft = calibratedValue;
}

调用这个函数设置scrollLeft，浏览器不会再自动调整数值，能保证视觉位置稳定。

方案2：用CSS transform替代scrollLeft #

如果业务场景允许，改用transform: translateX()实现内容偏移。transform的像素计算基于设备像素，不受scrollLeft的对齐规则干扰，能实现更精准的位置控制。

.scroll-content {
  transform: translateX(-20px); /* 替换成你的目标偏移值 */
  will-change: transform; /* 开启GPU加速，提升渲染流畅度 */
}

这种方式完全绕开了scrollLeft的限制，但如果需要依赖scroll事件或scrollLeft的状态值，需要额外维护偏移量的状态变量。

方案3：监听scroll事件修正异常偏移 #

如果必须使用scrollLeft，可以在设置值后监听scroll事件，一旦检测到浏览器自动修正了数值，就重新校准到预期值：

function stableSetScrollLeft(element, targetValue) {
  const dpr = window.devicePixelRatio || 1;
  const alignStep = 1 / dpr;
  const calibratedValue = Math.round(targetValue / alignStep) * alignStep;
  
  const fixScrollOffset = () => {
    if (Math.abs(element.scrollLeft - calibratedValue) > 0.001) {
      element.scrollLeft = calibratedValue;
    }
    element.removeEventListener('scroll', fixScrollOffset);
  };
  
  element.addEventListener('scroll', fixScrollOffset);
  element.scrollLeft = calibratedValue;
}

这种方法能及时纠正浏览器的自动修正行为，确保最终scrollLeft值符合预期。

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