在不影响滚动位置的情况下向DOM的任意一侧添加/删除元素？

Question

有没有办法通过定位元素或一些巧妙的技巧来允许从DOM的顶部或底部添加或删除元素而不影响滚动位置？

我尝试使用Jquery来测量添加/删除元素的长度，然后一旦添加/删除它们，就立即滚动当前容器到偏移量位置。这成功地使我保持在当前位置，但是我注意到，在首次影响内容然后运行后续滚动修复的时间段内，通常会出现可见的“跳跃”。

我想象处理这种情况的最佳方法是消除“滚动”的概念，并以某种方式手动实现，但我不知道如何着手去做。非常感谢您的任何想法！

- Rockster160

---

好的，滚动条会受到影响，因为父元素的高度由于其子元素的添加或删除而发生变化。你尝试手动将与已删除子元素受影响的相同高度添加/删除到父高度中了吗？ - Alon Adler

我有一些猜想...其中一个是将删除的元素的不透明度更改为零，但不要将它们删除。另一个是使用.appendTo()将元素移动到某个不可见的div中。对我来说，两者都不是灵丹妙药（我看到了它们的明显缺点），但是我还是想提供出来，以防万一会激发出可行的想法。 - cssyphus

从用户体验的角度来看，如果这些更改不经常发生，我会在所有内容前面制作一个“加载”浮动div - 以向用户显示正在发生的事情，但没有“跳跃”。即使实际更改时间是毫秒级别的 - 通过制作长达2-3秒的“加载”或“处理”div来防止屏幕上的跳跃可能是一个快速简单的胜利 - 甚至可以产生更正确和标准的用户体验。 - Alon Adler

@Rockster160，你有可行的解决方案吗？能否写一个答案呢？谢谢！ - Shayan

@Shayan - 我还没有。我前几天需要再次使用这个解决方案，但仍然遇到了跳跃问题。 - Rockster160

Answer 1

根据Chrome和Firefox当前实现的滚动锚定规范(链接)，这应该已经可以直接使用。

直接引用规范介绍:

今天，Web用户常常因为视口外发生的变化而分心。例如，脚本插入一个包含广告的iframe，或者非大小图片在缓慢的网络上加载。

[...]

滚动锚定试图在布局更改时保持用户对文档的视图稳定。它通过选择DOM节点(锚点)来确定滚动位置的调整。

如果不起作用，可能是因为所选的锚点节点不正确或您正在使用不受支持的浏览器(caniuse数据)。锚点节点的确切过程在此处描述。您可以通过在要不成为滚动锚点的节点上设置CSS属性overflow-anchor: none来调整锚点选择算法。

滚动锚定的工作示例：只需在5秒内滚动并在文本变为红色时向上滚动。您将看到一个新的<p>节点添加到顶部。

const root = document.querySelector('#root');
const ol = document.querySelector('#list');

ol.las

setTimeout(() => {
  const para = document.createElement('p');
  para.innerText = 'A\nB\nC';
  root.insertBefore(para, ol);  
  root.classList.add("red");
}, 3000);

.red {
  color: red;
}

<div id="root">
<ol id="list">
    <li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li><li>Hello</li><li>World!</li><li>Bye</li><li>World!</li>
</ol>
</div>

你能分享你的代码，看看为什么它不起作用吗？

- Anurag Kalia