ant design中 Select/Dropdown/DatePicker/TimePicker放在Modal中时,不更随model滚动

最新推荐文章于 2025-02-22 13:45:38 发布

何其涛

最新推荐文章于 2025-02-22 13:45:38 发布

阅读量2.1k

点赞数

分类专栏： react ant-design ant design pro 解决问题文章标签： react ant design datepicker select

本文链接：https://blog.youkuaiyun.com/deng1456694385/article/details/88664276

版权

解决问题同时被 3 个专栏收录

35 篇文章

订阅专栏

react

16 篇文章

订阅专栏

ant-design

15 篇文章

订阅专栏

在Ant Design的Modal组件中，Select、Dropdown、DatePicker和TimePicker的浮动菜单在Modal滚动时不会随之移动，可能导致被遮挡。原因是这些浮动层基于body定位，而Modal滚动时不改变body的位置。解决方案是利用Ant Design提供的属性，如Select的getPopupContainer和DatePicker的getPopupContainer，将浮动层绑定到Modal，以实现跟随滚动。

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

在使用ant design过程中发现,当再Modal中使用时,浮动的下拉菜单时间选择菜单等不随Modal的滚动而一起滚动,有时候会被部分遮挡.

这是因为浮动层都是默认以body定位的,而Modal层滚动的时候body整体页面并没有滚动,所以导致浮动层不会跟随滚动. 解决方法就是使用Select中的getPopupContainer和DatePicker中的getCalendarContainer属性来改变浮动层绑定的元素

具体代码

   <Modal
          destroyOnClose
          title='123'
          width='800px'
          visible={modalVisible}>
          <div id='haha'>
          		<Select   getPopupContainer={() => document.getElementById('haha')}>
          			{persons.map(p=> <Option key={p.id}>{p.name}</Option>)}
        		</Select>
        		<DatePicker  getCalendarContainer={() => document.getElementById('haha')} />
           </div>
 </Modal>