移动端浏览器scrollTop赋值整数后变浮点数，如何实现与桌面端一致？

你遇到的是移动端浏览器（尤其是WebKit内核）子像素渲染导致的问题——即使给scrollTop赋值整数，浏览器会根据设备像素比（DPR）自动调整为适配物理像素的数值，因此返回结果带小数。以下是几个可行的解决办法：

• 使用scrollTo方法替代直接赋值scrollTop，该方法对整数位置的兼容性更好：

const targetTop = Math.round(currentScrollTop + lineHeightInt);
scrollableDiv.scrollTo({
  top: targetTop,
  behavior: 'instant' // 不需要平滑滚动用instant，需要的话可换成smooth
});

• 如果scrollTo仍不生效，尝试利用requestAnimationFrame在渲染周期内重复设置：

const targetTop = Math.round(currentScrollTop + lineHeightInt);
scrollableDiv.scrollTop = targetTop;
requestAnimationFrame(() => {
  scrollableDiv.scrollTop = targetTop;
});

• 额外确认lineHeight的计算逻辑，确保它的原始值没有因字体继承、浏览器默认样式等产生精度误差，虽然你已经用了Math.round，但源头准确能减少后续问题。

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