非整数缩放值下程序化滚动异常问题（Chrome 65+Windows 10环境）

嘿，这个问题我之前也碰到过，是高DPI缩放场景下的滚动精度坑，咱们一步步来理清楚：

问题重现环境 #

• 浏览器：Chrome 65.0.3325.181
• 系统：Windows 10.0.16299.309
• 显示器：27英寸 3840×2160（4K），显示缩放比例150%

问题现象 #

1. 直接设置document.documentElement.scrollTop时，写入整数但读取到非整数值：
   • 设置document.documentElement.scrollTop=1，读取值为0.6666666865348816
   • 设置document.documentElement.scrollTop=9，读取值为8.666666984558105
2. 使用window.scrollBy配合递归函数测试时，输出的scrollY结果不符合预期：

   (function f() { 
     scrollBy(0, 1) 
     console.log(scrollY) 
     if (scrollY < 10) { f() } 
   })()
   

问题根源 #

这是因为高DPI缩放会导致浏览器的CSS像素和物理像素不匹配：
当系统设置150%缩放时，1个CSS像素对应1.5个物理像素。Chrome的滚动逻辑是基于物理像素计算的，当你设置1个CSS像素的滚动量时，实际物理滚动是1.5px，反向转换回CSS像素就会变成1/1.5≈0.666...，这就是你看到小数的原因。

解决办法 #

1. 基于设备像素比做转换

先获取设备像素比window.devicePixelRatio，将目标滚动值乘以该比例后再操作，读取时再转换回CSS像素：

const dpr = window.devicePixelRatio;

// 设置scrollTop为1 CSS像素对应的物理像素值
document.documentElement.scrollTop = 1 * dpr;
// 读取时转换回CSS像素
const actualScrollTop = document.documentElement.scrollTop / dpr;
console.log(actualScrollTop); // 输出1

2. 修正scrollBy的递归逻辑

把滚动步长和判断条件都基于物理像素处理，同时用requestAnimationFrame避免递归阻塞：

const dpr = window.devicePixelRatio;
const targetScrollY = 10 * dpr; // 目标是10 CSS像素对应的物理像素

(function f() { 
  window.scrollBy(0, 1 * dpr); 
  const currentScrollY = window.scrollY / dpr;
  console.log(currentScrollY); 
  if (currentScrollY < 10) { 
    requestAnimationFrame(f);
  } 
})();

3. 简单取整处理（适合精度要求不高的场景）

如果只需要整数结果，可以在读取后用Math.round()取整，虽然有微小误差，但能满足大部分基础需求：

document.documentElement.scrollTop = 1;
const roundedScrollTop = Math.round(document.documentElement.scrollTop);
console.log(roundedScrollTop); // 输出1

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