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

最新推荐文章于 2024-10-08 13:51:35 发布
最新推荐文章于 2024-10-08 13:51:35 发布
阅读量538 收藏
点赞数 3
文章标签： 前端 javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53964368/article/details/137825203
版权
本文介绍了如何使用afterOpenChange事件处理程序，通过控制`document.body.style.overflowY`属性来防止Modal或Drawer组件的浮层开启时下层内容跟随滚动，提供了解决此类问题的方法。
摘要由CSDN通过智能技术生成

当我们使用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’)}来解决，在浮层唤起时取消下层内容的浮动，在浮层消失时重新允许下层的浮动。

码辣烫
关注
antd-modal-dragable:在蚂蚁金服的antd库的modal组件上，新增可拖动功能
04-28
antd-modal-dragable 在蚂蚁金服的antd库的modal组件上，新增可拖动功能，完全复用antd-modal的全部api，支持同时打开多个...下载库中的Modal.js，放到自己的项目中，此文件依赖antd，如未安装antd，则无法使用该组件
Ant Design Drawer组件出现多滚动条
Cvory
04-08 1922
描述 在Drawer抽屉中，内容有video，且内容高度超过可视区域时，出现多滚动条 显示如下： 解决方案 Antd版本升级，我出现问题的版本为 4.12.3 现在最新版本为 4.15.0 最新版本中 已解决
弹出遮罩层后，如何禁止底层页面的滚动
weixin_30919429的博客
09-10 1849
弹窗是一种常见的交互方式，而蒙层则是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，我们会发现，当弹出遮罩层后，底层body的内容也是可以滚动，显然这不是我们想要的效果，而这个问题就是小萌最近开发项目时遇到的问题。 一个小程序的项目，是用MPVUE(一个使用 Vue.js 开发小程序的前端框架)做的。其中有做一个详情页面领取优惠券的功能。点击领取按钮，优惠券列表从底部滑出，...
对 Ant-design 的 Drawer 组件 增加拖拽效果
chenyajundd的博客
07-23 987
实现这个需求首先确定按下元素的位置，为按下元素添加相应事件，根据移动的距离动态赋值内容容器的宽度，再根据Drawer的width：auto，自动撑开Drawer组件即可。当然实现过程中也有其他小 bug，比如选中文字，设置最小宽度等等，其实还有小问题，文章中并没有呈现，就是如果里面的内容时 iframe 引入的话，会导致移动事件失效，这个会单独写一篇文章，主要方便有相同问题的朋友进行搜索解决问题。
实现一个比ant功能更丰富的Modal组件
小陈的博客
02-17 724
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
antd Modal弹窗设置滚动条、滚动条样式
jp2021的博客
05-17 2019
使用的less的global样式穿透，如果是VUE使用scss ::v-deep等方式对第三方组件库样式穿透。需要注意的是样式作用域非全局的使用唯一类名嵌套。例如Modal弹窗，我在modal上设置了className='batchModal' ，在.batchModal进行穿透和修改，其样式只作用于该类名的弹窗。
React Model 中添加滚动条
weixin_44233592的博客
08-13 1379
使div出现滚动条： 在div的样式上添加 height: 660px; //百分比不行 overflow:auto
一个自定义hook解决modal滚动穿透问题
爱吃烧烤的技术渣的博客
04-04 735
之前做的一个官网项目，页面上有弹窗，但是在滚动弹窗的时候，弹窗下的页面也会随之滚动，本来认为这个交互也没什么问题，但是产品体验后要求滚动弹窗的时候，下面的页面不要随之滚动，于是乎，有了这个hook。因为也是用了react-photo-view去预览图片，react-photo-view内部也会加上一个overflow:hidden的样式，所以这里做了个hack处理。话不多说，直接上代码。
解决antd的Form组件setFieldsValue的警告问题
01-21
解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置...
解决Antd Table组件表头不对齐的问题
01-18
在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为...
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
01-22
原因： 表单监听了关闭事件，执行了setState，若是给...以上这篇解决antd日期选择组件,添加value就无法点击下一年和下一月问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
antd RangePicker组件结合Form每次打开（onOpenChange）并未清除组件中的日期、关闭后也不能正确赋值
qq_37739720的博客
04-21 1049
1.onOpenChange打开后不能清空组件中的日期 原因：虽然RangePicker中的值清空，但是form中RangePicker的值未清空 解决：form.setFieldsValue({ date: [null, null] }); 2.onOpenChange关闭时，赋不上最新的值，导致每次关闭后都赋上一次的value值； 解决：form.setFieldsValue({ date: value }); 方法一：const date = form.getFieldValue('dat
antd组件中a-modal设置固定高度,内容滚动显示
热门推荐
JackieDYH的博客
08-10 1万+
当弹框内容过多时，会导致页面滚动显示数据，这个时候就需要处理一下这个弹窗的默认高度，让其出行滚动条进行显示多余数据内容
Ant Design ModalForm 打开二级弹框引起的页面滚动条失效解决方法
清风明月的博客
04-29 3607
Ant Design React 遇到打开二级弹框引起的页面滚动条失效，使用的是ModalForm。 原因：在打开弹框的时候会给body标签上加style=“width: calc(100% - 15px); overflow: hidden;”，隐藏标签的滚动条，关闭弹框会清除这个style，在弹框里面再打开二级弹框就会出现body标签上style没清理的问题导致滚动条消失。 解决方法如下： 在一级弹框ModalForm关闭后清理给body加的style，具体代码如下： <ModalForm
react弹窗Modal滚动穿透踩坑及解决（可能是全网最详细了）
csl784513390的博客
05-24 3531
react弹窗Modal滚动穿透踩坑及解决（可能是全网最详细了） 最近工作时发现，产品总喜欢做弹窗，还要弹窗里的内容可以滑动。这要是偶尔提一次就算了，我们大不了把页面加个overflow：hidden，弹窗内加scroll呗。但是经常提这种需求，作为程序员可不能重复造轮子呀，所以最近花了一周，把网上的相关文章（看来看去都是抄的），提取出了一个hooks方法，顺便记录踩坑过程。
多层drawer 导致的层级覆盖问题
biraotian的博客
08-26 2971
iviewUI中的Drawer组件大家都经常用，如果你的项目足够复杂，会有多层Drawer嵌套使用的场景。今天发现在多层嵌套时会导致层级覆盖的问题。 Drawer组件官方支持transfer是否将抽屉放置于 body 内 默认值是 true 这个属性会使得页面中的由Drawer组件生成的node节点，全部放在body中同级存在。为了保证Drawer的效能，node节点并不会在关闭时销毁，所以Drawer的加载顺序会决定Drawer的层级。当我们在嵌套使用时，经常会误以为组件没有更新，但其实不然。 网上有问
问题：antdv 在Modal中点击打开Modal，新的Modal显示在了前一个打开的Modal的下方
qq_44792224的博客
12-07 471
【代码】问题：antdv 在Modal中点击打开Modal，新的Modal显示在了前一个打开的Modal的下方。
【Vue】a-radio-group单选框数字与字符串回显问题
最新发布
叶为正的博客
10-08 70
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
antd中的Protable组件设置onRow属性后双击显示<Modal/>组件的内容
06-02
你可以使用Antd的Table组件的onRow属性来监听行的双击事件，然后在事件处理函数中弹出一个Modal组件来显示该行的内容。 以下是一个示例代码： ```javascript import { Table, Modal } from 'antd'; const dataSource = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; const MyTable = () => { const [visible, setVisible] = useState(false); const [selectedRow, setSelectedRow] = useState(null); const handleRowDoubleClick = (record) => { setSelectedRow(record); setVisible(true); }; const handleModalClose = () => { setVisible(false); }; return ( <> <Table dataSource={dataSource} columns={columns} onRow={(record) => ({ onDoubleClick: () => { handleRowDoubleClick(record); }, })} /> {selectedRow && ( <Modal visible={visible} onCancel={handleModalClose} onOk={handleModalClose} > <p>{selectedRow.name}</p> <p>{selectedRow.age}</p> <p>{selectedRow.address}</p> </Modal> )} </> ); }; export default MyTable; ``` 在这个示例中，我们使用了Antd的Table组件来渲染一个表格，然后监听了行的双击事件，并在事件处理函数中设置了当前选中的行，并显示了一个Modal组件来显示该行的内容。注意，我们使用了useState来保存当前选中的行和Modal组件的可见性状态。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值