Ant Design Drawer组件出现多滚动条

最新推荐文章于 2024-07-10 16:27:59 发布
最新推荐文章于 2024-07-10 16:27:59 发布
阅读量1.9k 收藏
点赞数
分类专栏： web前端 react antd 文章标签： Antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40593656/article/details/115507802
版权
web前端 同时被 3 个专栏收录
61 篇文章 1 订阅
订阅专栏
react
43 篇文章 1 订阅
订阅专栏
antd
18 篇文章 0 订阅
订阅专栏
在Ant Design（Antd）版本4.12.3的Drawer抽屉组件中，当内容包含video且高度超出可视区域时，会出现多个滚动条。此问题在更新到最新版本4.15.0后已被修复。升级Antd版本是解决这个问题的有效方法。
摘要由CSDN通过智能技术生成

描述

在Drawer抽屉中，内容有video，且内容高度超过可视区域时，出现多滚动条

显示如下：
在这里插入图片描述

解决方案

Antd版本升级，我出现问题的版本为 4.12.3
现在最新版本为 4.15.0
最新版本中 已解决

cvory
关注
专栏目录
antd + react model自定义footer_精通react/vue组件设计之用React Portals实现功能强大的抽屉(Drawer)组件...
weixin_39830323的博客
11-19 632
前言本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一个完成健壮的组件设计思路和方法,也能在实现组件的过程逐渐对react/vue的高级知识和技巧有更深的理解和掌握,并且在企业实际工作做游刃有余. 之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面...
antd中Modal和Drawer组件唤起后仍能滚动下层的问题解决
weixin_53964368的博客
04-16 532
即afterOpenChange={(op) => document.body.style.overflowY = (op?‘hidden’:‘scroll’)}来解决，在浮层唤起时取消下层内容的浮动，在浮层消失时重新允许下层的浮动。当我们使用Modal和Drawer组件的浮层触发滚动事件时经常出现浮层下层内容也会一起跟着滚动的情况，我们可以使用。
drawer , drawer menu , slide out , 拉出菜单 , 抽屉菜单 , 抽屉视图
08-22
drawer , drawer menu , slide out , 拉出菜单 , 抽屉菜单 , 抽屉视图
限制el-drawer body 内容
qq_33240556的博客
07-10 407
如果你想要限制el-drawer组件内部 () 的内容，比如限制其最大高度并添加滚动条，可以通过 CSS 来实现这个需求。这样当内容超出预设的最大高度时，用户可以通过滚动查看全部内容，而不是让抽屉无限延伸。下面是一个简单的示例，展示了如何通过内联样式或者外部 CSS 类来限制。
ElementUI的Drawer加上滚动条
肖潇不写代码
07-06 8981
第一种： 出处：https://www.cnblogs.com/jaycethanks/p/12507203.html <style lang="scss"> /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/ .el-drawer__body { overflow: auto; /* overflow-x: auto; */ } /*2.隐藏滚动条，太丑了*/ .el-drawer__container ::-webkit-scrollbar{ displ
el-drawer加滚动条
hxy1030_的博客
05-25 4611
el-drawer内容过多，加滚动条 el-drawer默认只显示部分内容，当内容过多时，加上滚动条。 解决方法：直接在页面的最下面添加以下代码 方法一： <style> .el-drawer.rtl{ overflow: scroll; } </style> 方法二： /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/ .el-drawer__body { overflow: auto; /* overflow-x: auto; */ } /*2
隐藏滚动条并可以滚动内容
baidu_39449021的博客
07-04 1493
原文链接：http://caibaojian.com/hide-scrollbar.html隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。方法1：计算滚动条宽度并隐藏起来在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这...
el-drawer内容太多显示滚动条
Franky
03-18 6424
需求如下: <style lang="less"> .el-drawer.rtl{ overflow: scroll; } // rtl : 从有右往左打开
ant-virtual-table:这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件表保持一致的AntDesign表。考虑到兼容性问题，内部通过监听表的滚动事件判断滑动行的位置，没有采用H5新特性IntersectionObserver。因此兼容性问题是比较好的。的throttle处理毒性问题，目前没有采用raf
03-11
这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件表保持一致的，可以让你实例中处理渲染1000万条数据，页面也非常流畅。 设计说明 ...
vue使用antdesign抽屉组件:getContainer="()=>"外层的滚动条没有被遮罩
最新发布
09-30
在Vue中使用Ant Design的Drawer（抽屉）组件时，如果设置了`getContainer="() => document.body"`这样的动态容器选择器，可能会遇到外层滚动条没有被遮罩的问题。这是因为`document.body`通常不会包含滚动条，当抽屉...
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1252
antd-react 组件库工作以来的总结
react使用fix固定定位弹窗时位置发生偏移解决方案
CarinaYang的博客
09-07 1921
问题描述： 如图，底部是固定操作按钮，居中对齐，点击“发布日历”时会出现确认弹窗，但是发现了问题，按钮会集体往右边移动一小段。 检查后发现原因：是底部操作栏的宽度是页面宽度，不包括滚动条，弹窗时出现遮罩，滚动条消失页面宽度会出现小幅增加，所以按钮会发生右移。 原样式： //js文件 &lt;div className={styles.fixBotBarWrap}&gt; &...
antd滚动表格纵向滚动条问题
Charonmomo的博客
11-25 3762
antd的滚动表格的纵向滚动条消失问题。
el-drawer使用滚动条
框框梨的博客
05-14 4353
<style> .el-drawer.rtl{ overflow: scroll; } </style> 刚开始把没把scoped去掉显示不出，去掉就可以了。 效果如下:
个人笔记010--body高度100%时出现纵向滚动条的原因
Dream02_05的博客
12-06 2411
       这两天做一个APP，首页要铺满屏幕所以设置body{ margin: 0; padding: 0;height: 100%; }，后面的时候发现最上面一个div如果写有margin-top就会出现纵向滚动条，后面上网百度查阅各种博客和资料才发现是CSS 外边距合并的原因（有点汗颜啊，虽然是比较少遇到，但还是显得基础比较烂），w3cshool是这样子解释的：外边距合并指的是，当两个垂直...
【ant design vue】表格超过高度时显示滚动条
代码随想录
04-12 2784
样式： /* 表格 */ /*.table 为全局表格自定义样式*/ .table .ant-table-body,.table .ant-table-header{ overflow-y: auto !important; } html代码： <a-table class="table" :scroll="{ y: 550 }"></a-table>
解决element ui drawer组件关闭后，滚动条不复原的问题
YZ_ZZZ24的博客
02-21 2731
情况一： 项目需求原因，抽屉弹窗的内容比较多，所以在样式上 使用 ::v-deep .el-drawer__body { overflow: auto; } 给组件增加滚动条， 问题出现： 每次抽屉组件关闭，再打开后滚动条的位置一直不复原。 解决： 在组件外再加一层 div 进行v-if 动态加载，这样每次动态值为false，该部分dom元素就会被销毁， 为true时，dom结构重新渲染，滚动条位置也将复原。 情况二： ...
React hooks antd 实现DrawerForm全屏事件
LiYinger1的博客
11-01 541
React antd 实现DrawerForm全屏事件
前端开发经验分享：写页面时总是有预期之外的滚动条怎么办？
qq_45820271的博客
03-21 1246
本文介绍了作者对前端页面编写时的一些心得
ant design vue drawer headerStyle属性用法
05-18
Ant Design Vue 的 Drawer 组件的 `headerStyle` 属性用于设置 Drawer 头部区域的样式。具体用法如下： ```html <template> <div> <a-button type="primary" @click="showDrawer">Open drawer</a-button> <a-drawer title="Basic Drawer" :visible="visible" :placement="placement" :headerStyle="{ backgroundColor: '#f0f2f5' }" @close="onClose" > <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </a-drawer> </div> </template> <script> export default { data() { return { visible: false, placement: 'right' }; }, methods: { showDrawer() { this.visible = true; }, onClose() { this.visible = false; } } }; </script> ``` 在上面的示例中，我们将 `headerStyle` 属性设置为一个对象，该对象中的 `backgroundColor` 属性指定了 Drawer 头部区域的背景颜色为 `#f0f2f5`。你可以根据自己的需求设置不同的样式属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值