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

Question

有什么方法可以定位元素或一些巧妙的技巧，以允许在不影响滚动的情况下从 DOM 的顶部或底部添加或删除元素？

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

我想处理此类事情的最佳方法是删除“滚动”的概念并以某种方式手动实现它，但我不确定如何去做。任何想法都非常感谢!

Answer 1

根据 Chrome 和 Firefox (link) 当前实现的滚动锚定规范，这应该已经可以开箱即用了。
直接来自规范介绍:

Today, users of the web are often distracted by content moving arounddue to changes that occur outside the viewport. Examples includescript inserting an iframe containing an ad, or non-sized imagesloading on a slow network.

[...]

Scroll anchoring attempts to keep the user’s view of the documentstable across layout changes. It works by selecting a DOM node (theanchor node) whose movement is used to determine adjustments to thescroll position.

它可能对您不起作用，因为选择的 anchor 节点不正确或者您使用的是不受支持的浏览器 ( caniuse data)。 anchor 节点的确切过程描述 here .您可以通过设置 CSS 属性 overflow-anchor: none 来调整 anchor 选择算法。在您不想成为滚动 anchor 的节点上。
滚动锚定的工作示例:只需在 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>

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