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

最新推荐文章于 2024-01-10 17:45:35 发布

梦想家~

最新推荐文章于 2024-01-10 17:45:35 发布

阅读量1k

点赞数 1

分类专栏：滚动条文章标签： css vue.js elementui

本文链接：https://blog.csdn.net/liangxia000/article/details/124680457

版权

滚动条专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

梦想家~

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
element 菜单使用el-scrollbar缩放浏览器区域原生滚动条溢出问题

elementUI 滚动条样式问题原生滚动条溢出
复制链接

扫一扫

专栏目录

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

王佳斌

03-27

6949

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

Element-ui中元素滚动时el-option超出元素区域的问题

10-16

在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...

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

解决element-ui中级联选择器 el-cascader 数据列表内容高度过高超出屏幕的问题和 滚动条 el-scrollbar 底下横向滚动条样式影响美观的问题

Yi_Miny的博客

07-28

3532

1. 级联选择器 el-cascader 数据列表内容超出屏幕解决办法：在全局样式中加入以下代码 /* 解决cascader级联样式表超出屏幕的问题 */ .el-cascader-panel { height: 210px; } 2. 滚动条 el-scrollbar 底下横向滚动条样式影响美观解决办法：在全局样式中加入以下代码 /* 隐藏横向滚动条 */ .el-scrollbar__wrap{ overflow-x: hidden; } 最终效果显示 ...

el-scrollbar超出的时候hover时自动出现滚动条

anny_mei的博客

06-09

676

<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

1116

** 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')); } ...

记录element ui NavMenu 导航菜单出现滚动条问题

qq_45994450的博客

05-26

1595

第二步、先用el-scrollbar标签将导航栏包裹起来（el-scrollba标签官网中无介绍但是源码中有，详情可以百度观看）第一步、先用el-aside标签将导航栏包裹起来，先按照官网配置导航栏，但是出现了滚动条。

Element-ui之ElScrollBar组件滚动条的使用方法

10-18

主要介绍了Element-ui之ElScrollBar组件滚动条的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

关于element-ui的隐藏组件el-scrollbar的使用

12-11

虽然在官方文档中没有给出这个组件，但是在源码中是有的。所以我们可以直接使用： <el></el> 但是我们需要微调一下样式，两种情况的演示代码如下： ....page-component__scroll .el-scrollbar__wrap { ov

Vue的el-scrollbar实现自定义滚动

12-23

最近在写一个内部平台系统，相信大家都知道，其中会有很多自定义的滚动区域，就比如说现在有一个列表需要滚动，第一个念头就是用 overflow: scroll; 啊！嗯嗯，又不是不能用！如果我不曾见过太阳，我本可以忍受黑暗...

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

三个el-table解决页面显示不全，加滚动条el-scrollbar

qq_52791268的博客

01-06

3483

控制好最外层div的高度，然后设置el-scrollbar高度为100%，div内部的三个el-table的总高度要溢出，不然也不会显示滚动条了。

element-ui 级联选择器菜单高度溢出问题解决方法

Kaite_han的博客

07-16

2462

高度溢出由于本人学习过程中遇到element-ui 级联选择器菜单高度溢出问题，如图所示：经过多种尝试发现是新旧版本问题。 element-ui新版默认显示全部菜单内容，所以我们需要在css样式中对级联选择器菜单的高度进行限制。 .el-cascader-menu { height: 300px; } 修改样式后，级联选择器的菜单高度得到改善，优化了操作界面。结果如图： ...

elementui下拉框选项滚动超出容器

user-jianyong的博客

05-07

640

app.vue <template> <div id="app"> <router-view /> </div> </template> <script> import fakeClickOutSide from "@/mixins/fackClickOutSide.js" export default { name: "App", mixins: [fakeClickOutSide] }; </scri

element-ui 表格滚动条（不同分辨率）自适应问题；

九七的博客

07-23

1630

element-ui表格滚动条自适应问题；

如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？

最新发布

sun19931127的博客

01-10

1663

页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的问题。

组件el-scrollbar的使用

pscool的博客

07-16

9549

注意1：el-scrollbar的class/css必须是全局样式，view内容中的样式会覆盖掉容器wrap的样式；注意2：el-scrollbar本身class不能带padding，不然会出现容器内外两个滚动条。el-scrollbar常用属性的理解。

解决 elementUi 侧边栏折叠后图标不显示或者文字不消失问题

DDDHL_的博客

03-01

8737

elementUi 侧边栏折叠后图标不显示或者文字不消失问题

element-ui 循环渲染侧边导航时，折叠展开时字不隐藏

m0_46678928的博客

04-14

1493

element-ui 循环渲染侧边导航时，折叠展开时字不隐藏

el-scrollbar自适应高度，超出最大高度时出现滚动条

weixin_42301445的博客

05-11

4835

使用elementUI的el-scrollbar时候遇见的问题，自适应高度，超出最大高度时出现滚动条，css样式加个这个就行了 .el-scrollbar .el-scrollbar__wrap{ padding-bottom: 13px; max-height: 600px; } 附源码截图： ...

element-plus el-scrollbar滚动事件

04-05

element-plus的el-scrollbar组件提供了多种滚动事件，可以通过监听这些事件来实现自定义的业务逻辑。以下是el-scrollbar组件支持的滚动事件： 1. scroll：滚动时触发的事件，可以通过event.target.scrollTop获取...