JavaScript中scrollBy无法精确滚动小数距离，如何实现无舍入滚动？

问题现象 #

调用scrollBy()传入小数滚动距离时，浏览器会自动做四舍五入处理：

document.getElementById('idcardsliderScroll').scrollBy(399.4, 0 );
// 实际滚动399px

document.getElementById('idcardsliderScroll').scrollBy(399.5, 0 );
// 实际滚动400px

可行方案 #

现代浏览器支持亚像素级滚动定位，避开scrollBy()的自动舍入逻辑即可实现精确滚动，以下是两种可靠方法：

• 直接操作scrollLeft/scrollTop属性
  scrollLeft和scrollTop本身支持浮点数赋值，能精确设置滚动位置：

  const slider = document.getElementById('idcardsliderScroll');
  // 在当前位置基础上精确滚动399.4px
  slider.scrollLeft += 399.4;
  

• 使用scrollTo()传入精确参数
  scrollTo()支持传入带小数的坐标值，同样能实现亚像素级滚动：

  const slider = document.getElementById('idcardsliderScroll');
  slider.scrollTo({
    left: slider.scrollLeft + 399.4,
    top: slider.scrollTop,
    behavior: 'auto' // 不需要平滑滚动可保留，需要的话改为'smooth'
  });
  

可行性说明 #

目前主流浏览器（Chrome、Firefox、Safari、Edge等）都已支持亚像素级的滚动定位，上述方案完全可以实现无舍入的精确小数距离滚动。

内容的提问来源于stack exchange，提问作者Luiz de Paula