el-scrollbar 滚动滑轮

最新推荐文章于 2024-09-23 09:02:00 发布
最新推荐文章于 2024-09-23 09:02:00 发布
阅读量643 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue使用Element-UI 文章标签： elementui css vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44816197/article/details/122302241
这篇博客揭示了一个鲜为人知的Element-UI组件特性——隐藏滚动条。通过在`<el-scrollbar>`标签中设置样式`height:100%`，即可实现滚动条的无缝集成，这一功能虽然未在官方文档中明确提及，但可以直接应用到项目中，为界面提供更整洁的视觉效果。

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

element-ui有一个隐藏的滚动滑轮，只是没写在文档里面，直接用就行

<el-scrollbar style="height: 100%">
</el-scrollbar>
vue2 - 完美去掉隐藏 elementui 侧边导航菜单出现的滚动条，局部去掉 el-menu 菜单显示的滚动条
高级前端工程师
03-27 6273
element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜单栏滚动条，vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去
表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口
qq_45840993的博客
09-26 9241
不知道UI抽什么风，所有列表都没用分页器，一律采用滚动加载。但我又是个懒蛋，不想手写所以就用了element-plus的无限滚动，但是v-infinite-scroll和el-table这俩搁一块就有bug了啊！！！在网上找了半天没遇到相似问题，现在来记录一下。本次开发中其实可以不用el-table的，因为这个列表并不展示头部，但是我又极其热爱el-table，所以不顾老大劝阻还是用了。好了好了，问题就是——。
Element UI【详解】el-scrollbar 滚动条组件
yang295242361的博客
08-15 8841
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
el-scrollbar 滚动条
qq_52335038的博客
06-02 3775
解决el-scrollbar 滚动条不生效的办法
基于el-scrollbar封装滚动条
ZionHH的博客
08-24 652
基于el-scrollbar封装滚动组件，提供回到顶部、滚动放向、最大高度功能。
el-scrollbar 使用以及滚动到指定位置
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
06-07 3万+
浏览器默认的滚动条样式不是很美观； 其实，在 element-UI 中有一个隐藏组件 el-scrollbar ；这个组件的滚动条还是很不错的，比原生的滚动条好看，而且还有一些效果（鼠标移入时显示，移出时隐藏）。 使用 el-scrollbar；以及滚动到指定位置。
Element-ui之ElScrollBar组件滚动条的使用方法
01-09 2万+
在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。 使用的原因： 原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。 .sidebar { position: fixed; border-right: 1px solid ...
el-table中的滚动条滑轮如何变为小手cursor:
最新发布
10-09
在Element UI的表格组件`el-table`中，如果你想要改变默认滚动条的样式使其看起来像一个小手cursor（通常是`pointer`），你可以通过自定义组件的样式或者利用CSS覆盖来实现。下面是一个简单的例子： 首先，确保你...
el-tabs的el-tab-pane的name太长解决方法，或给tabs加横向滚动滑轮代码
05-24
如果您想要在el-tabs中添加横向滚动滑轮，可以使用CSS的overflow-x属性和::-webkit-scrollbar伪类来实现。具体代码如下： ```html <div class="tabs-container"> <el-tabs type="border-card" class="scrollable...
elment-ui添加滑轮
06-13
要在 Element UI 中添加滚动条，你可以将 `el-scrollbar` 组件添加到需要滚动的元素的外部容器中，例如： ```html <el-scrollbar style="height: 400px;"> <!-- 这里放需要滚动的内容 --> </el-scrollbar> ```...
Element Plus 实例详解（五）___Scrollbar 滚动条
逆境清醒的博客
03-26 9905
Element Plus Scrollbar 滚动条，用于替换浏览器原生滚动条。主要内容有：Scrollbar 滚动条基础用法，横向滚动Scrollbar用法，Scrollbar滚动条最大高度与元素高度关系，手动滚动Scrollbar滚动条。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5。
el-scrollbar实现自动滚动
m0_50156032的博客
07-17 1213
ps: 重写组件的overflow样式会导致自动滚动失效，此时问题1可参照下面代码修改。全局重写.el-scrollbar__view样式，ps:注意加上父类进行限制。
鼠标滚轮控制el-scrollbar横向滚动（vue）
zj2468581628的博客
11-04 2619
<el-scrollbar ref="scroll" @wheel.native.prevent="changeScroll"> …… </el-scrollbar> changeScroll(e) { let wrap = this.$refs.scroll.$refs.wrap wrap.scrollLeft = wrap.scrollLeft - e.wheelDelta }
vue3监听el-scrollbar滚动事件
hyy的博客
12-12 1651
vue3监听el-scrollbar滚动事件
Vue（十二）：el-scrollbar滚动监听
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
10-27 2987
展示 源码 <template> <div style="padding: 50px;"> <el-scrollbar ref="scrollbar" style="height: 500px;background-color: #fafafa;"> <p v-for="item in 200" :key="item" class="scrollbar-demo-item">{{ item }}</p&g
动态实现无缝滚动，包括纯js和vue两种方式
weixin_45832746的博客
04-27 654
可视框里可以放n个实际数据有m个在实际数据后面复制加n个css消除滚动条。
vue实现数据栏无缝滚动实现方式-demo
JackieDYH的博客
09-23 553
通过实现两个item 进行循环。
鼠标横向滚动
weixin_51242199的博客
04-23 386
使用element的el-scrollbar来实现的 <el-scrollbar style="height: 60px; white-space: nowrap" ref="elscrollbar"> </el-scrollbar> scrollInit() { // 获取要绑定事件的元素 const scrollDiv = this.$refs["elscrollbar"].$refs["wrap"]; // document.addEven
使用el-scrollbar实现定位滚动，以及el-scrollbar去掉横向滚动条
Anyuegogogo的博客
11-26 1194
使用el-scrollbar实现定位滚动，以及el-scrollbar去掉横向滚动条
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值