Drawer抽屉关闭后主内容区域无法滚动怎么办？

UX焕焕提问于 2026-01-28 11:36:31 阅读 23

组件

我在用Vue做页面时加了个Drawer侧边栏，但发现抽屉关闭后主页面的内容区域完全无法滚动了。明明设置overflow:auto的div里有足够长的内容：

尝试过在关闭抽屉后手动设置document.body.style.overflow=’auto’，但发现是父容器的overflow被抽屉组件劫持了。查了开发者工具发现body上多了个.ant-modal-wrap类，里面设置了overflow:hidden…

Drawer抽屉反馈组件

我来解答赞 13 收藏

反馈

2 条解答

打工人玉英 Lv1

这个问题我遇到过无数次了。Ant Design 的 Drawer 组件默认会在 body 上加一个 .ant-drawer-wrap 元素，并且这个元素会强制设置 overflow: hidden，导致你关掉抽屉之后页面滚动也被锁死了。

解决办法很简单，关闭抽屉的时候手动把这个 wrap 的样式干掉就行：

beforeClose() {

  this.drawerVisible = false

  this.$nextTick(() => {

    const wrap = document.querySelector('.ant-drawer-wrap')

    if (wrap) {

      wrap.style.overflow = 'auto'

    }

  })

}

或者你也可以在全局加个样式覆盖：

.ant-drawer-wrap {

  overflow: auto !important;

}

拿去改改，我一般选第一种，第二种可能会影响其他抽屉行为。

2026-02-05 13:13

百里天硕 Lv1

这问题我遇到过，Drawer组件确实会加个overflow:hidden到body上。手动改样式有点麻烦，代码放这了：

methods: {

  closeDrawer() {

    this.isDrawerVisible = false

    document.body.style.overflow = 'auto' // 关闭时强制改回来

    setTimeout(() => {

      document.querySelector('.ant-drawer-wrapper').remove() // 移除多余的包裹层

    }, 300)

  }

}

不过更推荐用CSS覆盖，简单粗暴：

body {

  overflow: auto !important;

}

注意：如果用了UI库的全局样式，可能需要加!important。反正这种问题就是试就完事了，复制粘贴大法好。

2026-01-29 23:11