如何在LWC中使用Modal时隐藏页面滚动条并保持模态框可滚动？

核心思路 #

通过CSS控制页面body的滚动条显示状态，同时确保Lightning Modal的内部容器具备独立滚动能力，互不干扰。

方案1：全局隐藏body滚动条（永久生效） #

如果需要始终隐藏页面滚动条，可直接给body添加以下CSS：

/* 方案A：完全固定页面，禁止body滚动 */
body {
  overflow: hidden;
}

/* 方案B：保留body滚动能力，但隐藏滚动条（推荐） */
body {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
/* 针对Chrome、Safari等WebKit内核浏览器 */
body::-webkit-scrollbar {
  display: none;
}

方案2：模态框切换时动态控制（推荐） #

全局修改body样式可能影响其他场景，更好的方式是仅在模态框打开时隐藏body滚动条，关闭后恢复：

1. 先定义CSS类：

.body-hide-scrollbar {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.body-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

2. 在模态框的打开/关闭事件中切换类：

async openModal() {
  const modal = await this.modalService.open({
    header: this.template.querySelector('lightning-modal-header'),
    body: this.template.querySelector('lightning-modal-body'),
    footer: this.template.querySelector('lightning-modal-footer'),
    // 关闭模态框时移除类
    onclose: () => document.body.classList.remove('body-hide-scrollbar')
  });
  // 模态框打开后添加类
  document.body.classList.add('body-hide-scrollbar');
}

确保Lightning Modal可滚动的关键 #

给lightning-modal-body设置最大高度并开启自动滚动，避免内容溢出模态框：

lightning-modal-body {
  max-height: 60vh; /* 可根据需求调整，比如设为视口高度的60% */
  overflow-y: auto;
}

你的模态框基础结构示例：

<lightning-modal-header>模态框标题</lightning-modal-header>
<lightning-modal-body>
  <!-- 放置大量内容时，此处会自动出现滚动条 -->
</lightning-modal-body>
<lightning-modal-footer>
  <button onclick={closeModal}>关闭</button>
</lightning-modal-footer>

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