使用JS设置DOM属性的底层机制及scrollLeft异常问题咨询

首先要明确：DOM元素不是普通的JavaScript对象，它们属于宿主对象，其属性的访问和赋值逻辑由浏览器引擎（如Blink、Gecko）直接实现，而非遵循普通JS对象的属性存储规则。

为什么设置scrollLeft后立即取值会不符合预期？ #

当你执行ele.scrollLeft = 300时，触发的不是简单的属性值修改，而是浏览器的滚动调度逻辑：

• 若元素设置了scroll-behavior: smooth，浏览器会启动一个异步的平滑滚动动画，这个动画在JS调用栈之外的浏览器渲染线程中执行，不会阻塞当前JS代码的运行。
• scrollLeft的getter方法返回的是当前实时的滚动位置，而非你设置的目标值。因为平滑滚动刚启动时，滚动位置还没发生变化（初始为0），所以立即调用console.log会打印0。

这和普通JS对象的属性赋值完全不同：普通对象的属性赋值是同步修改内存中的值，取值时直接读取该值；而DOM的scrollLeft更像是一个“状态指示器”，它的setter负责发起滚动操作，getter负责读取当前实际状态。

如何解决这个问题？ #

根据你的需求，有两种常见方案：

方案1：跳过平滑滚动，同步设置滚动位置 #

如果不需要平滑滚动效果，可以临时覆盖scroll-behavior，或者直接使用scrollTo方法指定同步行为：

const ele = document.getElementById('a');
// 方法1：临时修改scroll-behavior
ele.style.scrollBehavior = 'auto';
ele.scrollLeft = 300;
console.log(ele.scrollLeft); // 此时会打印300
ele.style.scrollBehavior = 'smooth'; // 恢复原设置

// 方法2：直接用scrollTo指定同步行为
ele.scrollTo({ left: 300, behavior: 'auto' });
console.log(ele.scrollLeft); // 同步生效，打印300

方案2：等待平滑滚动完成后再取值 #

如果需要保留平滑滚动效果，可以通过监听滚动结束事件或轮询的方式等待滚动完成：

• 使用scrollend事件（现代浏览器支持）：

const ele = document.getElementById('a');
ele.addEventListener('scrollend', () => {
  console.log(ele.scrollLeft); // 滚动结束后打印300
}, { once: true }); // 只监听一次
ele.scrollLeft = 300;

• 用requestAnimationFrame轮询兼容旧浏览器：

const ele = document.getElementById('a');
const targetLeft = 300;
ele.scrollLeft = targetLeft;

function checkScrollComplete() {
  // 考虑到平滑滚动的精度误差，设置一个小阈值
  if (Math.abs(ele.scrollLeft - targetLeft) < 1) {
    console.log(ele.scrollLeft);
    return;
  }
  requestAnimationFrame(checkScrollComplete);
}
requestAnimationFrame(checkScrollComplete);

内容的提问来源于stack exchange，提问作者Joe C.