NextJS网站滚动时Div未渲染、滚出后消失的问题求助

问题定位 #

你遇到的是典型的**虚拟滚动（Virtual Scrolling）**行为——组件仅渲染视口内元素，滚出视口就卸载，再次进入时重新挂载。大概率是无意中用了虚拟滚动类组件（比如react-window、react-virtualized），或是UI库列表组件默认开启了虚拟滚动；也可能是动态导入的配置错误触发了不必要的懒加载逻辑。

具体解决步骤 #

• 检查虚拟滚动配置
  要是用了react-window/react-virtualized这类库，或是MUI/NextUI等框架的虚拟列表组件，它们默认会做"按需渲染"：

  1. 卡片数量不多的话（几十张以内），直接换成普通div列表，放弃虚拟滚动即可
  2. 保留虚拟滚动的话，调整overscanCount参数设置预渲染数量，比如overscanCount={3}，让视口外的3张卡片提前渲染，滚动时就不会有等待感

• 修正动态导入逻辑
  你提到用了Next.js Dynamic，要是之前的配置是类似这样：

  const Card = dynamic(() => import('./Card'), { loading: () => <Loading /> })
  

  这种动态导入是代码分割懒加载，默认在组件即将进入视口时才加载代码。要预渲染所有卡片，直接静态导入就行：

  import Card from './Card'
  

  必须用动态导入的话，关闭懒加载强制服务端渲染：

  const Card = dynamic(() => import('./Card'), { ssr: true, loading: () => null })
  

• 确保组件key值稳定
  检查子卡片的key属性，别用数组索引当key，要用卡片的唯一标识（比如用户ID、卡片ID）。不稳定的key会导致React频繁卸载/重渲染组件，加重滚动时的等待感。

• 用CSS隐藏而非卸载组件
  如果是自己实现的滚动逻辑，别在卡片滚出视口时把它从DOM里删掉，改用visibility: hidden或者opacity: 0隐藏，保留DOM节点，再次滚入时就不需要重新渲染。

针对你的代码示例 #

如果这些卡片是循环渲染的，确保循环时用了稳定的key：

{userCards.map(card => (
  <div key={card.id} className={styles.CardContainer}>
    <div className={styles.bioCard}>
      <div className={styles.titles}>
        <h3>{card.title}</h3>
      </div>
      <div className={styles.bioTextCard}>
        {card.content}
      </div>
    </div>
  </div>
))}

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