antd中Modal和Drawer组件唤起后仍能滚动下层的问题解决

码辣烫

于 2024-04-16 14:54:50 发布

阅读量937

点赞数 3

文章标签：前端 javascript react

本文链接：https://blog.youkuaiyun.com/weixin_53964368/article/details/137825203

版权

本文介绍了如何使用afterOpenChange事件处理程序，通过控制`document.body.style.overflowY`属性来防止Modal或Drawer组件的浮层开启时下层内容跟随滚动，提供了解决此类问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们使用Modal和Drawer组件的浮层触发滚动事件时经常出现浮层下层内容也会一起跟着滚动的情况，我们可以使用

<Modal afterOpenChange={(op) => document.body.style.overflowY = (op?'hidden':'scroll')}/>
<Drawer afterOpenChange={(op) => document.body.style.overflowY = (op?'hidden':'scroll')}/>

即afterOpenChange={(op) => document.body.style.overflowY = (op?‘hidden’:‘scroll’)}来解决，在浮层唤起时取消下层内容的浮动，在浮层消失时重新允许下层的浮动。