React中删除DOM元素时页面滚动位置跳变问题求助

React 实现思路 #

核心是删除前计算被移除元素的总高度，删除完成后调整页面滚动位置，抵消文档高度变化带来的偏移，让帖子C留在视口内。

具体步骤 #

• 用useRef获取包含A、B的容器DOM元素
• 删除操作执行前，计算A、B的总高度
• 更新状态移除A、B后，在DOM完成渲染时，将页面滚动位置减去被移除元素的总高度

代码示例 #

import { useState, useRef, useEffect } from 'react';

function PostList() {
  const [posts, setPosts] = useState(['A', 'B', 'C', 'D', 'E']);
  const abContainerRef = useRef(null);
  let removedHeight = 0;

  const removeAB = () => {
    // 提前计算要删除的A、B总高度
    if (abContainerRef.current) {
      removedHeight = abContainerRef.current.offsetHeight;
    }
    // 过滤掉A、B
    setPosts(prev => prev.filter(post => !['A', 'B'].includes(post)));
  };

  // DOM更新后调整滚动位置
  useEffect(() => {
    if (removedHeight > 0) {
      window.scrollTo({
        top: window.scrollY - removedHeight,
        behavior: 'instant'
      });
      removedHeight = 0; // 重置避免重复触发
    }
  }, [posts]);

  return (
    <div>
      <div ref={abContainerRef}>
        {posts.filter(p => ['A', 'B'].includes(p)).map(post => (
          <div key={post} style={{ height: '80vh', border: '1px solid #ddd', margin: '8px 0' }}>
            帖子{post}
          </div>
        ))}
      </div>
      {posts.filter(p => !['A', 'B'].includes(p)).map(post => (
        <div key={post} style={{ height: '80vh', border: '1px solid #ddd', margin: '8px 0' }}>
          帖子{post}
        </div>
      ))}
      <button onClick={removeAB} style={{ position: 'fixed', bottom: '20px', right: '20px' }}>
        删除A、B
      </button>
    </div>
  );
}

export default PostList;

CSS 辅助方案（局限性较大） #

仅适合静态场景，需配合少量JS：

• 当帖子C进入视口时，给C添加position: sticky; top: 0样式，使其暂时固定在视口顶部
• 删除A、B后，取消C的sticky样式，再执行上述React的滚动位置调整逻辑
• 单独CSS无法解决动态删除后的滚动偏移问题，必须依赖JS配合

关键原理 #

删除A、B后，文档总高度减少了这两个元素的高度，原滚动位置是基于旧文档高度的，因此需要通过调整scrollTop值，抵消高度差带来的视口偏移，确保C回到原显示位置。

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