在DOM的任一侧添加/删除元素而不影响滚动位置？

Question

是否有任何方法可以定位元素或某些巧妙的技巧，从而允许在DOM的顶部或底部添加或删除元素，而不影响滚动？

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

我认为处理此类问题的最佳方法是删除“滚动”的概念，并以某种方式手动实施，但是我不确定如何去做。任何想法都将不胜感激！

Answer 1

根据 Chrome 和 Firefox 当前实现的滚动锚定规范，这应该已经可以开箱即用（链接）。

\n

直接来自规格介绍：

\n

\n

如今，由于视口之外发生的变化，网络用户经常会被移动的内容分散注意力。示例包括\n插入包含广告的 iframe 的脚本，或在慢速网络上加载的非尺寸图像。

\n

[...]

\n

滚动锚定尝试使用户\xe2\x80\x99 的文档视图在布局更改时保持稳定。它的工作原理是选择一个 DOM 节点（\nanchor 节点），该节点的移动用于确定\n滚动位置的调整。

\n

\n

它可能不适合您，因为选择的锚节点不正确或者您正在使用不受支持的浏览器（caniuse data）。此处描述了锚节点的具体过程。您可以通过设置 CSS 属性来调整锚点选择算法overflow-anchor: none您可以通过在不希望成为滚动锚点的节点上

\n

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

\n

\r\n

\r\n

const root = document.querySelector(\'#root\');\nconst ol = document.querySelector(\'#list\');\n\nol.las\n\nsetTimeout(() => {\n  const para = document.createElement(\'p\');\n  para.innerText = \'A\\nB\\nC\';\n  root.insertBefore(para, ol);  \n  root.classList.add("red");\n}, 3000);

\r\n

.red {\n  color: red;\n}

\r\n

<div id="root">\n<ol id="list">\n    <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>\n</ol>\n</div>

\r\n

\r\n

\r\n

\n

您可以分享您的代码以查看为什么它不起作用吗？

\n