element 菜单使用el-scrollbar缩放浏览器区域原生滚动条溢出问题

最新推荐文章于 2024-08-26 16:46:51 发布
原创 最新推荐文章于 2024-08-26 16:46:51 发布 · 1.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #vue.js #elementui

这篇博客探讨了如何使用CSS对网页中的滚动条进行样式定制，通过在el-scrollbar__wrap元素上设置负外边距并指定滚动条宽度，实现了原生滚动条的视觉优化。内容详细解释了相关CSS代码及其作用。

el-scrollbar__wrap元素上已经设置了margin-bottom: -17px; margin-right: -17px; 所以在此基础上控制住原生滚动条的宽度即可

.scrollbar-wrapper {
   overflow-x: hidden !important;

   &::-webkit-scrollbar {
      width: 17px;
   }
 }

Vue - 完美解决 Element UI 侧边导航菜单 ＜el-menu＞ 出现滚动条，去掉 Element 侧边导航组件的横纵滚动条（但滚动功能依然保留，仅仅是去掉 “滚动条“）100% 解决方案
🏆 前端领域优质创作者
03-27 8088
vueelementui组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条如何去除，element-ui侧边导航栏有滚动条，Vueelementui中侧边栏滚动条隐藏，使用vue和element导航菜单去除的滚动条，element-ui侧边导航栏有滚动条，前端-如何关闭elementUI左侧aside的滚动条，使用vue和element导航菜单去除的滚动条，使用vue和element导航菜单去除的滚动条，Vueelementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜
vue2 - 完美去掉隐藏 elementui 侧边导航菜单出现的滚动条，局部去掉 el-menu 菜单显示的滚动条
高级前端工程师
03-27 6465
element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜单栏滚动条，vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去
el-menu高度超出出现滚动条
浪里小博条
01-11 3320
el-menu高度超出，el-aside高度超出，el-aside取消滑动条
element-ui的隐藏组件el-scrollbar的使用(解决原生滚动条没有隐藏的问题 高宽设置)
一起来看烟花吧的博客
10-20 1万+
element-ui的官网页面使用的这个滚动条，但是在官网文档中没有介绍这个组件。 在vue+elementui搭建的前端项目中使用这个el-scrollbar组件。 在项目中使用这个组件时由于各层的样式没有设置好，可能会显示出原生的滚动条，特此记录。 搭建脚手架项目，安装element-ui插件 按需引入需要的组件 import Vue from 'vue' import { Scrollbar } from 'element-ui' Vue.use(Scrollbar) 使用 &lt
解决element-ui中 级联选择器 el-cascader 数据列表内容高度过高超出屏幕的问题 和 滚动条 el-scrollbar 底下横向滚动条样式影响美观的问题
Yi_Miny的博客
07-28 3955
1. 级联选择器 el-cascader 数据列表内容超出屏幕 解决办法： 在全局样式中加入以下代码 /* 解决cascader级联样式表超出屏幕的问题 */ .el-cascader-panel { height: 210px; } 2. 滚动条 el-scrollbar 底下横向滚动条样式影响美观 解决办法： 在全局样式中加入以下代码 /* 隐藏横向滚动条 */ .el-scrollbar__wrap{ overflow-x: hidden; } 最终效果显示 ...
关于element-ui的隐藏组件el-scrollbar的使用
10-16
使用el-scrollbar组件时，主要目的是为内容区域添加自定义滚动条，这在网页布局中尤其有用，比如当内容区域高度超出视窗高度时，提供一个滚动条让用户体验更加友好。在一些定制化页面设计中，可能需要隐藏原生滚动条...
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
例如，在原文中提到的使用火狐浏览器时，通过优化样式调整滚动条可能无法兼容，使用 Element-ui 的 ElScrollBar 组件则可以避免此类问题。 2. ElScrollBar 组件的属性和用法 ElScrollBar 组件提供了几个关键属性，...
Vue的el-scrollbar实现自定义滚动
12-23
最近在写一个内部平台系统，相信大家都知道，其中会有很多自定义的滚动区域，就比如说现在有一个列表需要滚动，第一个念头就是用 overflow: scroll; 啊！嗯嗯，又不是不能用！如果我不曾见过太阳，我本可以忍受黑暗...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...
el-scrollbar超出的时候hover时自动出现滚动条
anny_mei的博客
06-09 790
<span>配置算法</span> <el-scrollbar class="myScroll" style="height:100%"> <el-tree :props="defaultProps" :data="data" show-checkbox node-key="id" ...
element 菜单溢出问题
qq_38949829的博客
11-03 1284
** vue element 菜单溢出问题 ** 解决方法： 生成的node_modules/element-ui/lib/element-ui.common.js 中大约3685行改为以下： if (this.appendToBody && this.$parent.$el !== this.$el) { this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter')); } ...
el-scrollbar滚动条不显示
m0_50923870的博客
08-22 2289
出现这样情况的主要原因为，页面开始渲染时内容并没有撑开el-scrollbar内容，所以不会显示滚动条。解决方法为使用其内置的update()方法 更改内容后对scrollbar进行更新。滚动条就可以正常显示了。动态添加标签发现滚动条不能正常显示，但是标签可以滚动。
el-scrollbar怎么隐藏横向滚动条
欲掩不从心
03-23 5520
来源：资料 之前弄过这个，然后就是记不住。在网上找了天资料，怎么都不行 解决办法： 首先：不管你的外层div 是浮动 还是相对定位 绝对定位，都得在el-scrollbar得外层div 设置个高度。 然后在style中加入 .el-scrollbar__wrap { overflow-x: hidden; } 到这里如果你发现不管用。就去app.vue 加入 .el-scrollbar .el-scrollbar__wrap { overflow-x: hidden; } // 上面隐藏横向滚动条
隐藏 elementUI el-menu导航菜单出现的滚动条
最新发布
m0_74410137的博客
08-26 1219
在工作中左侧菜单栏如果高度超出屏幕范围，就会生成滚动条。但是生成的滚动条又不美观。怎么样才能在不影响滚动的情况下实现隐藏滚动条。
记录element ui NavMenu 导航菜单出现滚动条问题
qq_45994450的博客
05-26 2273
第二步、先用el-scrollbar标签将导航栏包裹起来（el-scrollba标签官网中无介绍但是源码中有，详情可以百度观看）第一步、先用el-aside标签将导航栏包裹起来，先按照官网配置导航栏，但是出现了滚动条。
vue element隐藏组件滚动条scrollbar使用
热门推荐
小圣贤君的博客
03-28 8万+
pc端项目中，有时候会在页面内部出现滚动条的情况，windows浏览器默认的滚动条是很丑的，尤其是当滚动天出现在页面内部的时候，这时候，为了页面美观，可以考虑优化滚动条样式。 vue Element UI官方文档上并没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的，读者查看element源码，就可以查到这个组件scrollbar，至于为什么不放开这个组件就不得而知了。 效果图如ele...
使用.el-scrollbar时隐藏横向滚动条
qq_43061277的博客
04-20 3759
隐藏横向滚动条时隐藏不了的解决办法解决办法 解决办法 在遇到这个问题的时候，网上的一些回答都是一样的，都是在style中加上以下样式 .el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;} 但是我使用这个的时候，发现解决不了问题，于是发现通过在 <el-scrollbar ></el-scrollbar> 中添加样式就可以解决隐藏不了的办法，代码如下 <el-scrollbar wrap-style="overflo
datagridview滚动条自动滚动_element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动适配不同的浏览器...
weixin_39884832的博客
11-23 242
首先从上述路径可以看见scrollbar这个组件是存在的渲染出来层级*el-scrollbar(下面是自动渲染出来的不需要写在代码里) *el-scrollbar__wrap *el-scollbar__view *el-scollbar__bar is-horizontal *el-scollbar__thunmb ...
element-ui隐藏滚动条组件scrollbar 的使用
czx3387170的博客
09-30 1万+
使用插件自带的滚动条样式 1 &lt;el-scrollbar&gt;&lt;/el-scrollbar&gt; 将会出现滚动的内容放到上述标签内就可以了。  这里要简单的设置一下，将标签的height设为100%，查看效果的时候，会出现一个横向的滚动条，如果你不想要横向的滚动条，使用下面css属性设置就可以只显示竖向滚动条。 .el-scrollbar{height：100%；} ps:如果...
Vue与Element UI：el-scrollbar自定义滚动实现
需要注意的是，这些CSS样式需要覆盖浏览器默认的滚动条样式，因此可能需要考虑跨浏览器兼容性问题。 Vue的el-scrollbar组件为开发者提供了一种简单、高效的方式来实现自定义滚动条。尽管官方文档中没有直接的使用...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值