如何通过CSS实现长内容问卷弹窗打开时始终定位至内容顶部

完全可以通过纯CSS实现该交互效果，不需要编写任何操作scrollTop的JS逻辑。

定位偏移的底层原因 #

弹窗重新打开时自动定位到问卷底部的问题，本质是两个浏览器默认机制触发的，和业务逻辑无关：

• 滚动锚定（Scroll Anchoring）机制：当弹窗从隐藏状态切换为可见时，如果DOM内存在用户之前交互过、留存了聚焦状态的问卷表单元素（比如之前选中的单选题选项、填写过内容的输入框），浏览器会自动调整可滚动容器的位置，把当前聚焦元素挪到可视区域内，直接从顶部跳到问卷底部。
• 弹窗显隐方式的影响：如果做弹窗过渡动画时，为了保留平滑的显示效果，没有用display: none做隐藏，而是用opacity: 0、visibility: hidden的方式隐藏弹窗，弹窗内部的表单元素不会从浏览器的可交互渲染队列中移除，会一直留存之前的焦点状态，重新显示时就会触发上述的滚动锚定行为。

可落地的纯CSS实现代码 #

整个方案仅需3个配置点，全程不需要JS介入：

• 给弹窗的纵向滚动容器关闭自动滚动锚定，从根源上阻止浏览器自动调整滚动位置：

  .modal__body--scrollable {
    /* 关闭浏览器自动滚动锚定行为 */
    overflow-anchor: none;
    /* 保留原有滚动配置 */
    overflow-y: auto;
  }
  

• 明确限定滚动容器的最大可视高度，不要让容器高度随内容自适应撑满：
  很多时候自动定位到底部，是因为滚动容器的高度没有明确限制，浏览器会把整段问卷内容的底边当成可视区域的参考点，直接滚动到底部。补充对应样式：

  .modal__body--scrollable {
    /* 根据弹窗设计规格，设置固定的最大可视高度 */
    /* 示例值可根据实际弹窗的头部、操作栏高度调整 */
    max-height: calc(85vh - 120px);
  }
  

• 针对用非display方式做弹窗隐藏的场景，补全隐藏状态下的滚动锚定限制：
  如果你的弹窗是用透明度、可见性做隐藏的，需要给隐藏状态下的所有内部元素也关闭滚动锚定关联，避免焦点留存触发自动滚动：

  /* 弹窗隐藏状态的类名 */
  .modal--is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* 隐藏状态下，内部所有元素都不参与滚动锚定计算 */
  .modal--is-hidden * {
    overflow-anchor: none;
  }
  

兼容性说明 #

overflow-anchor属性目前的线上覆盖率已经超过92%，Chrome、Firefox、新版Safari均已原生支持。就算在低版本浏览器上该属性不生效，因为我们已经给滚动容器明确限定了可视高度，浏览器也不会出现自动把滚动位置定位到内容底部的问题，完全不需要额外做兼容补丁。

小提示：如果目前做弹窗显隐切换用的是display: none，本身就不会出现定位偏移的问题——因为display: none的元素重新显示时，浏览器会自动重置内部滚动容器的位置到内容最顶端。之前出现位置错乱，本质都是没有处理滚动锚定的默认行为导致的。

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