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

已于 2024-07-29 11:41:25 修改
阅读量5.3k 收藏 3
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 文章标签： elementui vue.js 去掉侧边菜单滚动条 vue 去掉 el-menu 局部去除侧边菜单导航
于 2023-03-27 10:59:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/129791027
版权
本文介绍了如何在Vue2项目中，使用elementui时，针对特定页面完美去除侧边导航菜单（el-menu）的滚动条，不影响其他页面功能，提供了解决方案和相关CSS样式设置。
摘要由CSDN通过智能技术生成

前言

很多朋友都想去掉这个滚动条，影响美观

你可以使用我提供的方法，很快就能去除掉这个滚动条，并且是局部的很安全，其他页面不受影响！

去掉后滚动的功能依然可以使用，只不过不显示滚动条了。

在这里插入图片描述

横向、纵向都有，直接全部去除！！！

解决方案

请参考如下代码，根据你

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
Vue - 完美解决 Element UI 侧边导航菜单 ＜el-menu＞ 出现滚动条，去掉 Element 侧边导航组件的横纵滚动条（但滚动功能依然保留，仅仅是去掉 “滚动条“）100% 解决方案
王佳斌
03-27 7034
vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去除的滚动条，element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜
Vue ElementUi导航组件结合后台管理实现左侧菜单滚动不显示滚动条
龘
01-30 1443
1、代码例 <el-aside :width="Iconflag ? '200px' : '0px'"> <el-row style="width: 100%"> <el-col> <div class="Text">后台管理系统</div> //导航外新包一个盒子，除了Text类盒子不滚动外，其余导航滚动，并不显示滚动条 <div class="Nav
css 横向滚动条 el-menu 菜单横向滚动条
qq_31683775的博客
07-10 184
【代码】css 横向滚动条 el-menu 菜单横向滚动条。
【Element Plus】El-menu导航栏常见错误集合
m0_62811051的博客
11-29 1505
给 el-menu 标签添加样式。
Vue去除滚动条（div加el-table)兼容firefox
qq_41038412的博客
12-16 3998
1.el-table去除滚动条 .el-table { height: calc(100vh - 280px);//固定高度 overflow-y: auto;//设置滚动 scrollbar-color: transparent transparent;//兼容火狐 &.el-table--scrollable-y ::-webkit-scrollbar { displa
vue项目去掉网页滚动条
热门推荐
weixin_43550562的博客
08-24 1万+
去掉网页滚动条
vue elementui table去掉滚动条与实现表格自动滚动且无滚动条
Smile yourlife
07-25 6404
现在需求是右侧滚动条不好看，需要去除滚动条，并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动条也会有一个空白列影响占位的。当table内容列过多时，可通过height属性设置table高度以固定table高度、固定表头，使table内容可以滚动。如果样式不想影响全局，可以使用样式穿透。autoScroll.js 工具类。下面记录代码，亲测有效。
vue 盒子横向滚动并取消滚动条
abs_botton的博客
08-16 1579
制作效果如下 html如下 <div class="head-img-text"> <!-- 头像--> <div v-for="i in 10" :key="i" class="img-box"> <img src="https://img01.yzcdn.cn/vant/cat.jpeg"> <.
vue的css取消滑动条，适应在不同的屏幕上
qq_44267691的博客
09-19 2034
①首先，也是最简单的应当用百分比%去设置width和height，而不是用px将其写死。其次，内部元素盒子的布局，也应该用类似于 width:calc(100% - 180px);这样的方法去动态设置，以应对不同的界面。可以看出，当宽度大于1766，就用第二个main-big的样式；在新建一个vue.config.js中，可以如下配置，引入stylus文件。众所周知，当我们的页面开发完成后，在不同的屏幕上，会呈现出不一样的效果。再在APP.vue的style标签中，引入设置的css变量。
vue2-perfect-scrollbar:Vue.js包装器提供完美的滚动条
05-02
Vue.js简约但功能强大的包装器，可完美显示滚动条 您在寻找与Vue3兼容的版本吗？ 检查 为什么创建它？ 因为我 :red_heart: 在我的项目中使用（ :raising_hands: ）。 也是因为github上的当前解决方案已经过时或...
vue使用keep-alive保持滚动条位置的实现方法
10-17
在开发使用Vue框架的应用时，我们常常需要在用户在页面间切换时保持滚动条的位置，以改善用户体验。然而，当我们使用Vue内置的<keep-alive>组件来缓存组件状态时，会发现滚动条位置并没有被自动保存。为了解决这个...
vue.js-div滚动条隐藏但有滚动效果的实现方法
11-29
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐 var evt = window.event || arguments[0]
vue组件-自定义滚动条
06-30
vue组件-自定义滚动条
vue项目全局去掉网页滚动条
爱蹦哒的咸鱼的博客
04-06 913
【代码】vue项目全局去掉网页滚动条。
vue删除滚动条
FOR_HOU的博客
11-30 191
MainMenu（当前显示的）组件高度超过时会出现下面滚动条，但是想要的是右边的效果。
vue2隐藏浏览器右侧滚动条
m0_67880202的博客
04-12 750
3.在全局css/scss/less中配置。右侧滚动条就消失啦~
vue项目去除全屏化后的水平及垂直滚动条
SZHFCLXX的博客
05-10 599
vue项目去除全屏化后的水平及垂直滚动条
vue后台管理项目，如何取消菜单栏默认滚动条？
light的博客~~~
06-20 1543
解决问题
vue3 项目去掉滚动条，全屏铺满
最新发布
weixin_56615245的博客
07-20 124
【代码】vue3 项目去掉滚动条，全屏铺满。
vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换
06-02
要实现NavMenu导航菜单选中状态的切换，可以利用vue-router和ElementUI提供的组件。 首先，在路由配置中，可以给每个路由对象添加一个meta属性，用来标记该路由是否处于被选中状态，例如： ```javascript const ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值