CSS重置：攻克"ant design弹窗关闭后页面不能滚动"难题
2022-12-11 19:02:40
Ant Design 弹窗关闭后无法滚动页面的救星指南
在使用 Ant Design 时，您可能遇到过关闭弹窗后页面无法滚动的令人沮丧的情况。别担心！本文将深入探讨这个问题并提供几种简单的解决方案，让您恢复页面的流畅滚动。
问题根源：CSS 重置
Ant Design 采用了 CSS 重置，它将浏览器的默认 CSS 样式重设为初始值。其中一个被重设的属性是 overflow，它控制元素是否允许滚动。
默认情况下，overflow 被设置为 hidden，这意味着元素的内容不会溢出其边界。当弹窗打开时，它覆盖了整个页面，因此整个页面被设置为 overflow: hidden，导致无法滚动。
解决方案 1：手动设置 overflow: auto
最直接的解决方案是手动将 body 元素的 overflow 属性设置为 auto。在您的 CSS 文件中，查找 body 元素并添加以下样式：
body {
overflow: auto;
}
这将确保在关闭弹窗后，页面的 overflow 属性自动恢复为 auto，从而恢复正常的滚动。
解决方案 2：针对弹窗覆盖设置
如果您不想全局修改 body 元素的 overflow 属性，您也可以单独针对弹窗元素设置 overflow: auto。
在您的 CSS 文件中，找到弹窗元素的类名并添加以下样式：
.ant-modal-root {
overflow: auto;
}
这将仅将弹窗元素的 overflow 属性设置为 auto，而不会影响其他元素。
抽屉组件的特殊情况
如果您使用的是抽屉（drawer）组件，您可能会发现即使设置了 overflow: auto，页面仍然无法滚动。这是因为抽屉组件通常直接安装在 body 元素上，因此会继承其 overflow 属性。
要解决此问题，您需要将抽屉组件安装到一个单独的元素上。
在您的 HTML 文件中，添加以下代码：
<div id="drawer-container">
<Drawer />
</div>
然后在您的 CSS 文件中，查找 #drawer-container 元素并添加以下样式：
#drawer-container {
overflow: auto;
}
这将使抽屉组件的 overflow 属性独立于 body 元素，从而恢复页面的滚动功能。
结论
通过这些解决方案，您现在应该能够轻松解决 Ant Design 弹窗关闭后页面无法滚动的常见问题。了解 overflow 属性的重要性将帮助您在未来的项目中避免此问题。
常见问题解答
- 为什么我的页面仍然无法滚动，即使我已设置了
overflow: auto？
答：确保您已正确针对正确的元素设置 overflow: auto。如果您使用的是抽屉组件，请使用 #drawer-container。
- 我应该将
overflow设置为auto还是scroll？
答：auto 通常是一个更好的选择，因为它允许在需要时自动出现滚动条，而 scroll 会强制始终显示滚动条。
- 是否可以使用 JavaScript 来解决此问题？
答：可以，但 CSS 解决方案更简单、更有效率。
- 此问题是否只影响 Ant Design？
答：否，其他 CSS 框架也可能遇到类似的问题。
- 是否存在针对此问题的更高级解决方案？
答：您可以使用 CSS 变量或通过 JavaScript 动态设置 overflow 属性来创建更灵活的解决方案。
