再也不怕El-dialog弹出时body有滚动条了！实用的解决方案

2023-03-22 07:20:00

解决 El-dialog 在二级组件中导致 body 出现滚动条

在前端开发中，组件库可以极大提高效率和代码可维护性。ElementUI 作为一款优秀的组件库，提供了丰富的组件和强大功能。其中，El-dialog 组件是一个常用的弹窗组件，但使用它时可能会遇到一个问题：当在二级组件中创建弹窗时，body 会出现滚动条，影响页面布局和用户体验。

原因分析

出现这种情况的原因在于，El-dialog 组件默认会在 body 元素上添加 overflow: hidden 样式，禁止 body 滚动，从而影响到二级组件中的弹窗内容。

解决方案

为了解决这个问题，我们需要修改 body 元素的 overflow 样式，有两种方法：

在 El-dialog 组件上添加 overflow: visible 样式。 这会允许 body 滚动，解决滚动条问题。
使用 CSS 变量控制 body 元素的 overflow 样式。 这种方法更加灵活，可以根据不同情况使用不同的 overflow 样式。

代码示例

下面是使用 CSS 变量控制 body 元素 overflow 样式的例子：

<style>
  :root {
    --body-overflow: hidden;
  }

  .el-dialog {
    overflow: var(--body-overflow);
  }
</style>

// 在需要显示滚动条的场景下，将 body 元素的 overflow 样式设置为 visible
document.documentElement.style.setProperty('--body-overflow', 'visible');

// 在需要隐藏滚动条的场景下，将 body 元素的 overflow 样式设置为 hidden
document.documentElement.style.setProperty('--body-overflow', 'hidden');