关闭二级Modal后如何让一级Popup重新获得滚动焦点？

当然能搞定！这个问题我之前也碰到过——关闭二级模态框后，浏览器自动把滚动焦点切回了主页面，导致滚动操作跑偏。咱们有几个靠谱的办法来解决，挑适合你项目的就行：

核心思路是：当你关闭二级弹窗的瞬间，手动让一级弹窗里负责滚动的容器获得焦点，这样后续的滚动事件就会绑定到它身上。

首先，给一级弹窗的滚动容器加个tabindex="-1"（默认非表单元素不能被聚焦，这个属性能让它具备聚焦能力），然后在关闭二级弹窗的逻辑里调用focus()方法。

举个原生JS的例子：

// 找到一级弹窗的滚动容器
const firstPopupScrollBox = document.getElementById('first-popup-scroll-container');
// 关闭二级弹窗的按钮点击事件
document.getElementById('close-second-popup').addEventListener('click', () => {
  // 先执行关闭二级弹窗的逻辑（比如隐藏它）
  document.getElementById('second-popup').style.display = 'none';
  // 给滚动容器设置tabindex，确保能被聚焦
  firstPopupScrollBox.setAttribute('tabindex', '-1');
  // 让滚动容器获得焦点
  firstPopupScrollBox.focus();
});

同时要确保滚动容器的样式正确，能支持滚动：

#first-popup-scroll-container {
  max-height: 70vh; /* 根据需求设置最大高度 */
  overflow-y: auto;
  /* 可选：去掉聚焦时的默认轮廓，更美观 */
  outline: none;
}

这个方法更直接——当一级弹窗打开时，给主页面的body添加样式，禁止它滚动。这样不管怎么切换弹窗，滚动操作都只会作用在弹窗内部。

先写CSS样式：

/* 锁定主页面滚动的类 */
.body-scroll-disabled {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

然后用JS控制这个类的添加和移除：

let savedScrollPosition = 0;

// 打开一级弹窗时
document.getElementById('open-first-popup').addEventListener('click', () => {
  // 记录当前主页面的滚动位置
  savedScrollPosition = window.scrollY;
  // 显示一级弹窗
  document.getElementById('first-popup').style.display = 'block';
  // 给body加类，锁定滚动
  document.body.classList.add('body-scroll-disabled');
  // 避免页面跳回顶部
  document.body.style.top = `-${savedScrollPosition}px`;
});

// 关闭一级弹窗时
document.getElementById('close-first-popup').addEventListener('click', () => {
  // 隐藏一级弹窗
  document.getElementById('first-popup').style.display = 'none';
  // 移除锁定类，恢复主页面滚动
  document.body.classList.remove('body-scroll-disabled');
  // 恢复之前的滚动位置
  window.scrollTo(0, savedScrollPosition);
});

这个方案的好处是一劳永逸，从根源上避免主页面抢滚动焦点的问题。

如果你是用UI组件库（比如Ant Design、Element UI、Bootstrap Modal），很多组件本身就自带解决这个问题的属性。比如：

• 在Ant Design的Modal中，设置scroll="body"可以让弹窗内容滚动，同时锁定背景；
• 在Vue的Element UI中，给Dialog添加lock-scroll属性就能锁定背景滚动；
• Bootstrap Modal默认就会锁定背景滚动，只要确保弹窗内容的overflow-y设置正确就行。

这种情况下不需要自己写太多逻辑，直接配置组件属性就搞定了~

内容的提问来源于stack exchange，提问作者Ibrahim Musa Adi