React中如何让指定div元素始终保持在视口内？

可能原因及对应修复 #

1. 按钮默认触发表单提交 #

如果“下一题”按钮放在<form>标签内，且未指定type="button"，浏览器会默认将其识别为submit类型按钮，点击后触发表单提交（哪怕没有配置action属性），导致页面刷新并回到顶部。

修复方式：给按钮明确添加type="button"属性：

<button type="button" onClick={handleNext}>下一题</button>

2. React组件更新导致滚动位置重置 #

当#show-content内的题目组件因状态更新重新渲染时，若组件的key属性使用了不稳定的值（比如索引、随机数），会触发React卸载旧组件再挂载新组件的操作，间接导致浏览器滚动位置异常。

修复方式：给动态渲染的题目组件绑定稳定且唯一的key（比如题目ID）：

{currentQuestion && (
  <QuestionComponent key={currentQuestion.id} question={currentQuestion} />
)}

3. 强制锁定目标区域在视口 #

若上述方法无效，且需要#show-content始终保持在视口内，可通过以下两种方式实现：

方案A：CSS固定定位

给目标div添加固定定位样式，让它始终停在视口内（可根据需求调整top、left等值）：

#show-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-height: 80vh;
  overflow-y: auto;
}

方案B：手动保存/恢复滚动位置

在执行下一题逻辑前后，手动保存并恢复页面滚动位置：

const handleNext = () => {
  // 保存当前滚动位置
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 切换题目
  setCurrentQuestion(prev => prev + 1);
  // 确保DOM更新后恢复滚动位置
  requestAnimationFrame(() => {
    window.scrollTo(0, scrollTop);
  });
};

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