element ui使用滚动条组件el-scrollbar(官方没有)解决对话框el-dialog的滚动条问题

最新推荐文章于 2025-05-07 10:18:39 发布
最新推荐文章于 2025-05-07 10:18:39 发布
阅读量9.3k 收藏 7
点赞数 6
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42527726/article/details/104824605
本文介绍在使用Vue结合ElementUI开发项目时，如何解决对话框内容过多导致的滚动条显示及样式问题。通过引入el-scrollbar组件并自定义样式，实现垂直滚动条的优雅展示，同时隐藏水平滚动条。

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

今天写vue+element ui写项目时有个需求是要在对话框中进行操作，但是当对话框内容过多时却不会出现滚动条，通过修改样式后虽然出现滚动条，但是滚动条的样式不是很理想，通过查找发现了element ui官方没有的隐藏组件el-scrollbar(滚动条组件)

<el-scrollbar style="height:300px;">//我在这里设置高度未300px
	......
</el-scrollbar>

将内容写在el-scrollbar组件中，超过定义的高度后就会出现滚动条

.el-scrollbar__wrap {
    overflow-x: hidden!important;
}

然后将水平方向的滚动条隐藏即可！

Vue.js前端框架教程16：Element UI的el-dialog组件
Cachel Wood的博客
01-11 674
点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”。: 在对话框关闭前调用的函数，参数为关闭前的回调函数，可用于阻止对话框关闭。: 布尔值，设置点击对话框背景时是否关闭对话框。: 布尔值，设置关闭对话框时是否销毁对话框内容。: 布尔值，设置是否在对话框显示时才渲染内容。: 布尔值，设置对话框打开时是否聚焦到对话框。通常用于嵌套对话框时避免样式冲突。: 布尔值，设置点击遮罩层时是否关闭对话框。: 布尔值，设置是否在对话框显示时锁定滚动。
vue2 - 完美去掉隐藏 elementui 侧边导航菜单出现的滚动条，局部去掉 el-menu 菜单显示的滚动条
高级前端工程师
03-27 6280
element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜单栏滚动条，vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去
el-scrollbar element-ui的滚动条组件（官方文档没有）
weixin_43899935的博客
08-12 1659
el-scrollbar 配合 el-menu 写侧边栏，简直没有太好使 <el-aside width="200px" style="overflow:hidden"> <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="default-scrollbar__view" >
element-ui的滚动条组件el-scrollbar（官方没有）
weixin_44770377的博客
05-23 1309
可直接使用<el-scrollbar></el-scrollbar>组件，将需要滚动的内容包在里面。注意要设置el-scrollbar及他外层的高度，以及组件里.el-scrollbar__wrap{ overflow-x: hidden; } <template> <div > <el-drawer title="查看预览" :visible.sync="DialogShow" direction="rtl" size="80%" >
【ElementUI】el-dialog让其内容在其内部滚动
最新发布
qq_50692372的博客
05-07 250
参考：https://blog.csdn.net/m0_50981596/article/details/124730050。tips: div一定要加高度，否则会无效。声明：日常记录，避免下次遇到此问题找不到。
element ui文档没有的组件信息（el-scrollbar）
dzy19980724的博客
07-21 956
这里写自定义目录标题element ui文档没有的组件信息（el-scrollbar）文档源码中的参数（props）文档源码中的解析文档源码中的样式分析（若默认滚动条显示，鼠标滚轮无法实现滚动看这里思考） element ui文档没有的组件信息（el-scrollbar） 文档源码中的参数（props） props: { native: Boolean, // 是否使用本地，设为true则不会启用element-ui自定义的滚动条 wrapStyle: {}, // 包裹层自定义样式 wrapClass
element ui的滚动条组件el-scrollbar (官方没有)
丽丽大神ing的博客
12-26 2515
！注意 1.外层要嵌套一个容器，并设置高度 .menu{ width: 200px; height: 100%; position: absolute; left: 0; top: 0; } 2.el-scrollbar 的高度为100% 3.x轴可以设置隐藏 .el-scrollbar__wrap{ overflow-x: hid...
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
例如，在原文中提到的使用火狐浏览器时，通过优化样式调整滚动条可能无法兼容，使用 Element-ui 的 ElScrollBar 组件则可以避免此类问题。 2. ElScrollBar 组件的属性和用法 ElScrollBar 组件提供了几个关键属性，...
Element UI中el-dialog中内容超出自定义滚动条
qq_40603125的博客
06-04 1982
【代码】Element UI中el-dialog中内容超出自定义滚动条。
element Dialog添加滚动条
qq_41742961的博客
11-03 2421
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="900px" v-if="deviceDialog"> <div :style="{height: scrollHeight}" style="overflow-y: auto;overflow-x:hidden" > <el-form :model="form" ref="form" :inline="true" l
element ui 的滚动条,Element UI 文档中没有被提到的滚动条
橙-极纪元-JJYCheng
03-09 2689
element ui 的滚动条,Element UI 文档中没有被提到的滚动条
Element-ui el-scrollbar 源码解析
weixin_33862188的博客
05-01 2319
前几天美化博客时发现滚动条在window下实在太难看，所以在基于vue的技术上寻找美化滚动条的方法。记得Element-ui源码中有名为 el-scrollbar 的滚动组件，虽然文档上没有提到，但使用的人还是不少。今天记录下源码的阅读心得。 在这之前 在看苦涩的代码前，先大概描述一下滚动条组件的用处和行为，方便理解代码逻辑。 因为操作系统和浏览器的不同，滚动条外观是不一样的。需要做风格统一时，...
关于elementUI，dialog中使用无限滚动失效的原因
weixin_40925295的博客
05-07 3497
记一个dialog中使用无限滚动v-infinite-scroll的大坑 最近在项目中使用了v-infinite-scroll进行无限加载，然后发现有时能加载有时不能加载，就很离谱。 场景1：在dialog中利用一个子div加上v-infinite-scroll进行无限加载，结果是一下能触发函数，一下不能，然后将项目中的margin改成padding，加上infinite-scroll-distance设置高度后解决了。 场景2：当第一页没有填充满整个页面时，按理来说是会自动请求第二页的，结果当我多次
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
fruge365的博客
02-05 2954
elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug 由于遮罩层的出现，导致页面的滚动条隐藏，从而使页面出现闪动的效果。
elementui的滚动条组件
qq_68155756的博客
03-17 495
在elementui 2X版本的官网中是没有滚动条组件的 element-plus官网中有el-scrollbar组件 用法：及其简单，套在原本比较丑的盒子的外层就行了
Vue - 关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题 和双滚动条问题
Muxiu
06-15 3893
关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题。
使用element-ui的el-scrollbar时滚动条没有显示出来但是页面可以滚动的解决办法
yookooi
07-13 4578
可以通过以下方式来调用。已经渲染完成之后再调用。这样，滚动条就会根据内容的变化进行更新，并正确显示出来。组件时，滚动条没有显示出来但页面可以滚动，可以尝试调用其。在适当的时机（例如在数据加载完成后或组件更新后），调用。钩子函数中还是在其他方法或事件回调中调用。在数据加载完成后或其他合适的时机，调用。如果使用 Element UI 的。已经渲染完成之后再调用。
element-ui官网上不存在的滚动条组件
Ice__wine的博客
12-17 384
element-ui官网上不存在的滚动条组件 <template> <div style="height:600px;"> <el-scrollbar style="height:100%"> <div style="width:1200px;height:800px;margin:0 auto;" > 内容..... </div> </el-scrollbar>
el-plas el-dialog 竖向滚动条 代码
06-04
el-dialog是element-ui中的一个弹窗组件，而el-scrollbar是element-ui中的一个滚动条组件，用于在页面中添加滚动条。 如果你想在el-dialog中添加一个竖向滚动条，可以在弹窗的内容区域添加一个el-scrollbar组件，并设置其高度和最大高度，如下所示： ```html <el-dialog title="标题" :visible.sync="dialogVisible"> <el-scrollbar wrap-class="scrollbar-wrap" view-class="scrollbar-view" :max-height="300"> <div class="dialog-content"> // 弹窗内容 </div> </el-scrollbar> </el-dialog> ``` 其中，wrap-class和view-class属性是用来自定义滚动条样式的class名称，max-height属性是设置最大高度，如果内容超过最大高度，则会出现竖向滚动条。 关于el-scrollbar的更多用法和参数设置，你可以参考element-ui官方文档：https://element.eleme.cn/#/zh-CN/component/scrollbar
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

濮家大少

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值