Modal弹窗设置滚动条样式，让你的弹窗更加惊艳！

Antd Modal：设置滚动条样式的指南

在使用 Antd Modal 弹窗时，您可能需要设置滚动条样式，特别是当弹窗内容较多，需要滚动浏览时。本指南将介绍如何在 Antd Modal 中设置滚动条样式，涵盖多种方法。

1. 使用 Less 全局样式穿透

Less 是一种 CSS 预处理器语言，允许使用变量、混合等功能。要使用 Less 全局样式穿透，需要以下步骤：

• 安装 Less
• 创建一个 Less 文件（例如：global.less）
• 在 global.less 中添加以下代码：

.ant-modal-body {
  overflow-y: auto;
}

• 导入 global.less 文件

2. 使用 Vue 中的 Scss 的 ::v-deep 样式穿透

Vue 中可以利用 Scss 的 ::v-deep 样式穿透来修改第三方组件库样式：

• 安装 Scss
• 创建一个 Scss 文件（例如：global.scss）
• 在 global.scss 中添加以下代码：

::v-deep .ant-modal-body {
  overflow-y: auto;
}

• 导入 global.scss 文件

3. 设置唯一类名嵌套

除了样式穿透，还可以通过设置唯一类名嵌套来修改弹窗样式：

• 为 Antd Modal 设置唯一类名（例如：my-modal）
• 创建一个 CSS 文件（例如：modal.css）
• 在 modal.css 中添加以下代码：

.my-modal .ant-modal-body {
  overflow-y: auto;
}

• 导入 modal.css 文件

4. 注意点

• 全局样式穿透非必要，可能会导致样式冲突。
• 唯一类名嵌套需要设置唯一的类名，避免全局作用域。
• 修改弹窗样式时，需要考虑兼容性。

结论

通过本文，您已了解了如何在 Antd Modal 中设置滚动条样式。使用 Less 全局样式穿透、Vue 中 Scss 的 ::v-deep 样式穿透或设置唯一类名嵌套，您可以轻松地控制弹窗的滚动条行为，为用户提供流畅的浏览体验。

常见问题解答

1. 如何在 Antd Modal 中隐藏滚动条？

• 使用 CSS：.ant-modal-body { overflow: hidden; }
• 设置 overflow 属性为 hidden

2. 如何更改 Antd Modal 滚动条的宽度？

• 使用 CSS：.ant-modal-body::-webkit-scrollbar { width: 10px; }
• 调整 width 属性

3. 如何禁用 Antd Modal 的滚动条？

• 使用 CSS：.ant-modal-body { overflow: hidden; }
• 设置 overflow 属性为 hidden

4. 如何使 Antd Modal 始终显示滚动条？

• 使用 CSS：.ant-modal-body { overflow: scroll; }
• 设置 overflow 属性为 scroll

5. 如何使 Antd Modal 滚动条平滑滚动？

• 使用 CSS：.ant-modal-body::-webkit-scrollbar { -webkit-overflow-scrolling: touch; }
• 启用 -webkit-overflow-scrolling: touch 属性