Vue elementui中侧边栏滚动条隐藏

最新推荐文章于 2024-08-26 16:46:51 发布

置顶 BugUncle

最新推荐文章于 2024-08-26 16:46:51 发布

阅读量6.2k

点赞数 20

分类专栏： Web 文章标签： css 前端 vue

本文链接：https://blog.csdn.net/m0_56737433/article/details/119414393

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

小小的记录下今天遇到的问题

在写vue后台管理系统的时候，侧边栏菜单太多，导致有滚动条出现，所以就显得不是很好看

标签

<el-aside>
</el-aside>

css样式

.el-aside::-webkit-scrollbar {
     display: none;
}

::-webkit-scrollbar 滚动条整体部分
display: none----将元素的显示设为无，即在网页中不占任何的位置

持续学习中…

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

BugUncle

关注关注

20
点赞
踩
34

收藏

觉得还不错? 一键收藏
9
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue2 - 完美去掉隐藏 elementui 侧边导航菜单出现的滚动条，局部去掉 el-menu 菜单显示的滚动条

高级前端工程师

03-27

5471

element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜单栏滚动条，vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去

vue-element-admin 隐藏侧边栏

LittleLittleup的博客

05-14

2696

参考https://blog.csdn.net/weixin_48508049/article/details/114018306 在 src/style/sidebar.scss 里搜索hideSidebar找到以下部分 .hideSidebar { .sidebar-container { width: 54px !important; } .main-container { margin-left: 54px; } 修改为 .side

9 条评论您还未登录，请先登录后发表或查看评论

Element UI【详解】el-scrollbar 滚动条组件

yang295242361的博客

08-15

3005

Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等

ElementUI侧边栏导航菜单隐藏显示问题

最新发布

m0_74410137的博客

08-26

306

在工作中左侧菜单栏如果高度超出屏幕范围，就会生成滚动条。但是生成的滚动条又不美观。怎么样才能在不影响滚动的情况下实现隐藏滚动条。

vue-elementul右侧滚动条不显示，改变滚动条样式。elementul隐藏组件。不显示滚动条还可以滚动

seeeeeeeeeee的博客

08-02

2441

效果图看到了elementul官网滚动条是这样的，这是一个隐藏的组件，我们也可以用到自己的项目中，改变滚动条样式。上代码用法，el-scrollbar标签包裹住你想要改变滚动条的部分，比如只包裹左侧菜单栏，或者像我一样是直接包裹总的router-view，把所有的滚动条都改了。 html部分 <el-scrollbar style="height:100%"> <div>1</div> <div>2</div> &lt

Vue ElementUi导航组件结合后台管理实现左侧菜单滚动不显示滚动条

龘

01-30

1450

1、代码例 <el-aside :width="Iconflag ? '200px' : '0px'"> <el-row style="width: 100%"> <el-col> <div class="Text">后台管理系统</div> //导航外新包一个盒子，除了Text类盒子不滚动外，其余导航滚动，并不显示滚动条 <div class="Nav

vue 左侧栏拖拽右侧宽度不变；出现滚动条

周家大小姐

04-23

2643

demo地址:点击下载其中封装了自定义指令及公共组件的左侧菜单,菜单效果为双击,可搜索子节点用户需求,左侧菜单为一次加载出来;可以搜索树控件下所有的子菜单内容 1.左侧菜单可以自由拉宽缩小;右侧内容不变,本人用到的方法是右侧div中嵌入router-view才能做到不缩放 1.左侧菜单默认为200的宽;拉条为15的宽当小于200的时候右侧动态设置宽度,不让右侧空出来 ```views views ├─ AboutView.vue └─ HomeView.v...

element vue 纵向滑动条_Element-ui之ElScrollBar组件滚动条的使用方法

weixin_39523887的博客

12-20

1965

在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。使用的原因：原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。.sidebar {position: fixed;border-right: 1px solid rgba(0,0,...

elementui侧边栏折叠动画

08-12

以上是通过自定义CSS来实现ElementUI侧边栏折叠动画的方案。如果你有更好的办法，可以参考Element Plus官方文档中关于Menu菜单的属性。希望对你有所帮助！<span class="em">1</span><span class="em">2</span><span ...

Vue - 完美解决 Element UI 侧边导航菜单＜el-menu＞出现滚动条，去掉 Element 侧边导航组件的横纵滚动条（但滚动功能依然保留，仅仅是去掉 “滚动条“）100% 解决方案

王佳斌

03-27

7113

vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去除的滚动条，element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜

vue.js隐藏滚动条的方法

极星(*^_^*)的博客

03-01

799

vue.js去掉滚动条的方法： 1、设置滚动条： overflow-x: scroll; white-space: nowrap; 2、隐藏滚动条： ::-webkit-scrollbar { width: 0 !important; } ::-webkit-scrollbar { width: 0 !important;height: 0; }

vue 弹窗封装组件隐藏外部滚动条

weixin_46898766的博客

06-21

423

【代码】vue 弹窗封装组件隐藏外部滚动条。

vue隐藏滚动条

qq_51313111的博客

08-07

646

使用vue-element时，出现两个滚动条 是使用两个容器布局进行嵌套使用引发的两个滚动条，在不需要显示的滚动条中添加css样式 overflow: hidden 即可解决

vue 设置滑动页面滚动条，隐藏和显示的方法

仰望心空1123

01-14

3159

div内容滚动显示： overflow-x: scroll; div隐藏滚动条：

vue 设置和隐藏滚动条

淘气の小狼人的博客

12-02

3520

vue 设置和隐藏滚动条

vue设置及隐藏滚动条

qq_35139533的博客

09-15

7824

1、设置滚动条： overflow-x: scroll; white-space: nowrap; 2、隐藏滚动条： ::-webkit-scrollbar { width: 0 !important; } ::-webkit-scrollbar { width: 0 !important;height: 0; }

vue，css实现元素隐藏或取消滚动条

哆啦A梦的百宝袋的博客

01-13

8200

vue和html适用的实现元素隐藏或取消滚动条，原理是css的功能。

隐藏滚动条和上下滚动时出边界的后面的黑色的背景

guyueyan213的专栏

07-27

714

隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor]; for (UIView *aView in [webView subviews]) { if ([aView isKindOfClass:[UIScrollView class]]) {

vue elementui隐藏侧边栏

03-16

要隐藏Vue ElementUI的侧边栏，可以使用以下方法： 1. 在侧边栏组件中添加一个变量，用于控制侧边栏的显示和隐藏。 2. 在侧边栏组件中添加一个方法，用于切换侧边栏的显示和隐藏状态。 3. 在需要隐藏侧边栏的组件中，通过调用侧边栏组件的方法来控制侧边栏的显示和隐藏。例如，可以在App.vue中添加一个变量showSidebar，用于控制侧边栏的显示和隐藏： ``` <template> <div> <el-container> <el-header>Header</el-header> <el-container> <el-aside v-if="showSidebar">Sidebar</el-aside> <el-main>Main</el-main> </el-container> </el-container> </div> </template> <script> export default { data() { return { showSidebar: true } } } </script> ``` 然后，在需要隐藏侧边栏的组件中，可以通过调用App.vue中的方法来控制侧边栏的显示和隐藏： ``` <template> <div> <button @click="toggleSidebar">Toggle Sidebar</button> </div> </template> <script> export default { methods: { toggleSidebar() { this.$root.showSidebar = !this.$root.showSidebar } } } </script> ``` 这样，点击按钮时就可以切换侧边栏的显示和隐藏状态了。