使用JS设置DOM属性时会发生什么

Question

我想知道当我做ele.scrollLeft = 200;这样的事情时，JS在幕后会做什么，因为我最近遇到了一个bug。

例如，我有一个scroll-behavior设置为平滑的元素，然后我运行以下命令：

document.getElementById('a').scrollLeft = 300;
console.log(document.getElementById('a').scrollLeft);

这不是打印300，而是打印0。我很困惑，因为如果它的行为像一个普通的JS对象，我希望它被设置为300，然后在我的调用堆栈完成后，它会将值更改为任意值(在这种情况下，由于滚动行为，它为0(。相反，它似乎以某种方式暂停了我的调用堆栈执行，并在返回给我之前在幕后做了一些事情，就好像它是一个代理一样。

Answer 1

DOM确实存在于JS上下文之外，我们在JS中可以访问的是实际DOM对象的包装
这些包装器对象的大多数属性都是getter和setter。设置它将调用一个函数，该函数可能会产生一些东西，也可能会更改值。获取它还将调用一个函数，该函数也可能产生一些东西或返回缓存的值。例如，获取元素的.scrollLeft值可能会触发CSS框的重新计算，因为这些框需要是最新的，引擎才能返回正确的值。

现在，scrollLeft setter通常所做的是将scroll称为元素算法。该算法最终会改变元素的滚动位置，但对于"smooth"的滚动行为，至少在下一个绘画帧之前不会发生这种情况。当您调用getter时，它会返回当前的滚动位置。因此，如果您在滚动真正开始之前调用这个getter，那么您确实会得到与调用setter之前相同的值。