Javascript 如何在使用"；时获得元素的实际左边滚动条；滚动行为：平滑"；

我在javascript中设置元素的

scrollLeft

属性，但在下一行中，当我尝试返回该值时，返回值为0

这是因为我在scrollable元素中使用了“scroll behavior:smooth”

请参见代码笔：

还是在这里

HTML:

JS:

const scrollable=document.getElementById（'scrollable'））
const history=document.getElementById（'history'））
scrollable.scrollLeft+=500
history.innerText+=`当前scrollLeft:${scrollable.scrollLeft}`//这里我得到零！！！
setTimeout（（）=>history.innerText+=`\n当前scrollLeft:${scrollable.scrollLeft}`，1000）//超时后，它会工作！

CSS

。可滚动{
宽度：100%；
高度：50px；
溢出-x：自动；
滚动行为：平滑；
}
.大量内容{
宽度：30000px；
背景：绿色；
身高：100%；
}

---

您可以看到，只有在setTimeout之后，我才能获得正确的值，这是因为动画正在结束。如果我不计算实际值，如何得到实际值？我不想跟踪滚动位置。

编辑：使用回调和设置间隔

.可滚动{
宽度：100%；
高度：50px；
溢出-x：自动；
滚动行为：平滑；
}
.大量内容{
宽度：30000px；
背景：绿色；
身高：100%；
}
window.onload=函数（）{
var scrollable=document.getElementById（'scrollable'）；
var history=document.getElementById（'history'）；
滚动（可滚动，5000，功能（值）{
log（“滚动完成（在“+value+”px中）”）；
});
}
功能滚动（elm、sl、回调）{
var finish=elm.scrollLeft+sl；
elm.scroll左=完成；
var cicle=setInterval（函数（e=elm，c=callback）{
如果（e.scrollLeft==完成）{
c（e.左）；
清除间隔（cicle）；
}
}, 50);
}

编辑：使用回调和设置间隔

.可滚动{
宽度：100%；
高度：50px；
溢出-x：自动；
滚动行为：平滑；
}
.大量内容{
宽度：30000px；
背景：绿色；
身高：100%；
}
window.onload=函数（）{
var scrollable=document.getElementById（'scrollable'）；
var history=document.getElementById（'history'）；
滚动（可滚动，5000，功能（值）{
log（“滚动完成（在“+value+”px中）”）；
});
}
功能滚动（elm、sl、回调）{
var finish=elm.scrollLeft+sl；
elm.scroll左=完成；
var cicle=setInterval（函数（e=elm，c=callback）{
如果（e.scrollLeft==完成）{
c（e.左）；
清除间隔（cicle）；
}
}, 50);
}

这有同样的问题，最终值仅在动画完成后可用。现在在动画完成后激发。这有同样的问题，最终值仅在动画完成后可用。现在在动画完成后激发。