当一些 DOM 元素被移除时屏幕跳来跳去 (React)

Question

所以我的网站存在以下问题：

假设我有 5 个帖子，帖子 A、B、C、D 和 E，并且每个帖子的宽度约为 80 vh。

现在，假设我向下滚动，以便帖子 C 在我的网站上可见，并且当我仍在帖子 C 上时，帖子 A 和 B 从 DOM 中删除。现在，发生的事情是，由于帖子 A 和 B 不再存在，帖子 C、D 和 E 向上移动以填充帖子 A 和 B 删除后留下的空白空间，而我的屏幕保持原位，现在在此之后行为帖子 E 显示在我的屏幕上。

这不是我想要的。我想这样做，以便在删除帖子 A 和 B 后，视口可能会从上向下或类似的方式降低其高度，而我的屏幕仍保留在帖子 C 上。

有什么方法可以使用一些 React 魔法或通过编辑 CSS 来强制执行此行为吗？

Answer 1

并不真地， 当元素从 DOM 中移除时，它会将帖子向上推，因为您的元素可能具有 position: relative。您可以使用 position: absolute 将它们保留在特定位置，但这不会删除删除元素后创建的空白新空间。而且似乎不是一个好的选择。

我可以建议有某种 div，让我们说 80vh，并且在这个 div 里面所有的帖子都带有某种溢出滚动。然后你不是在滚动页面而是在 div 上滚动。