移动元素时如何保持容器的水平滚动位置？

原因分析 #

当你把带水平滚动的#container元素从原父级.row移动到另一个.row时，元素会先被从DOM树中移除，再重新插入到新位置。浏览器的默认行为是：脱离DOM的元素会丢失其滚动状态相关的内存记录，重新插入时会将滚动位置初始化为0，所以滚动位置会被重置。

保持滚动位置的方法 #

需要通过JavaScript在DOM操作前后记录并恢复滚动值，步骤如下：

1. 移动元素前，获取#container的scrollLeft（水平滚动偏移量）；
2. 执行DOM移动操作，将#container转移到目标.row；
3. 把记录的scrollLeft值重新赋值给#container。

示例代码：

// 获取目标元素
const container = document.getElementById('container');
const targetRow = document.querySelector('.row:nth-child(5)'); // 替换为你的目标行选择器

// 保存滚动位置
const savedScrollPos = container.scrollLeft;

// 移动元素
targetRow.appendChild(container);

// 恢复滚动位置
container.scrollLeft = savedScrollPos;

CSS能否单独解决？ #

不能。CSS仅负责元素的样式与布局控制，无法记录或恢复DOM元素的动态状态（比如滚动位置）。这种状态保存与恢复的逻辑必须依赖JavaScript实现。

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