element-plus 原生滚动条使用

最新推荐文章于 2024-09-23 12:22:55 发布
最新推荐文章于 2024-09-23 12:22:55 发布
阅读量2k 收藏
点赞数
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ICY_YES/article/details/125884865
版权

element-plus使用了自己处理的el-scroll，并不是不好，而是有的运用场景不适合。比如某些触屏为电阻屏，导致滚动不方便，而是需要原生的滚动条进行处理。

el-scroll单独使用时，有native的属性，默认为false。element-ui没有自动使用el-scroll这层，但是再plus中自动进行增加。开始时想直接改造el-scroll的样式，但是个人未实现。

后来修改了scrollbarProps的native为true，也把原生的滚动条样式进行修改之后，比较符合UI要求。

 

 

 

 

xzyuan
关注
Element-UI Plus 给el-dropdown添加滚动条效果
RRRRRRichard的博客
03-01 2836
Element-UI Plus 给el-dropdown添加滚动条效果 不需要添加el-scrollbar的使用方法!!! 复制一个原生的dropdown组件 https://element-plus.gitee.io/zh-CN/component/dropdown.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 <template> <el-dropdown> <span class="el-dropdown-link"&gt
element-plus select 滚动加载更多
qq_38329111的博客
02-08 2074
vue3 element-plus select 滚动加载更多
Element Plus 实例详解（五）___Scrollbar 滚动条
逆境清醒的博客
03-26 8645
Element Plus Scrollbar 滚动条，用于替换浏览器原生滚动条。主要内容有：Scrollbar 滚动条基础用法，横向滚动Scrollbar用法，Scrollbar滚动条最大高度与元素高度关系，手动滚动Scrollbar滚动条。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5。
Element UI控件el-scrollbar定位布局
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-23 1696
除了基本功能外，我们还可以自定义滚动条的样式。Element UI 提供了几个 CSS 类来帮助我们修改滚动条的外观。;;
【ElementPlus源码】Scrollbar 滚动条
karshey的博客
07-01 1075
Scrollbar 滚动条组件从里到外分为三个组件：thumb（滚动条的可拖动部分）、bar（thumb的相关信息）和Scrollbar（滚动条组件）。此方法做的事情是：将滚动条thumb移动到点击位置，并相应地调整滚动区域的滚动位置。，可以在elementPlus滚动条的文档中试验一下，拖动滚动条结束后，滚动条的显示会消失。鼠标移动时，函数会根据鼠标位置更新滚动条thumb的位置，并调整滚动区域的滚动位置。通俗的语言就是：点击滚动条然后拖动，滚动条和滚动区域都会更新位置，就做了这样的事情。
element-plus el-scrollbar 滚轮横向滚动
zezejingi的博客
01-09 1529
element-plus el-scrollbar 滚轮横向滚动
vue3下使用elementplus的el-scrollbar美化滚动条及触底加载
lfYexun的博客
12-18 3346
el-scrollbar有一个触底加载的坑点，就是加载后内容高度增加了，但是滚动条位置没有跟着变化，所以需要用手动触发官方写的setScrollTop方法进行重置，就可以了。
Element-UI 给el-dropdown添加滚动条
ddk54321的博客
04-08 9483
Element-UI 官方文档中没有给出下拉菜单（el-dropdown）设置滚动条的方法。 但是又没有试验出为下拉菜单添加el-scrollbar的使用方法。 所以直接修改的自带的滚动条样式。 下拉菜单el-dropdwn的HTML代码： <!-- 未归档项目下拉框 --> <el-dropdown class="project-container" @comm...
element plus的Popover组件和Scrollbar 组件嵌套使用时无法调用scrollbar组件方法的问题，附上父子组件生命周期执行顺序。
weixin_50975849的博客
12-05 1210
问题描述Popover组件内使用自定义选项卡嵌套Scrollbar组件，在调用scrollbar组件的方法时报错 scrollbarRef.value?功能描述：使用了popover（弹窗）组件的虚拟触发模式，嵌套自定义的选项卡组件，并在选项卡的内容区嵌套Scrollbar（滚动条）组件，想要实现每次弹出窗出现或者选项卡出现，滚动条都在顶部位置。
element-plus的scrollbar总显示
09-20
关于滚动条的问题，如果你想要在Element Plus中始终显示滚动条，可以使用`el-scrollbar`组件并设置其属性`always-show`。 例如，在HTML中添加滚动区域并设置`always-show`属性： ```html <el-container> <el-...
element-plus 的el-scrollbar滚动条组件
lucky_ly的博客
06-09 953
el-scrollbar组件可以替换原生的滚动条，可以设置出现滚动条的高度，若无设置则根据容器自适应。通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。scroll 滚动条的滚动事件，会返回滚动条当前的位置。
Element-ui之ElScrollBar组件滚动条的使用方法
12-01
在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。 使用的原因： 原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。 .sidebar { position: fixed; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; transition
Element ui plus Form 表单验证失败后，自动滚动到失败的位置（validate）（scrollToField）
shmilyyxj的博客
08-31 3494
Element ui plus Form 表单验证失败后，自动滚动到失败的位置（validate）（scrollToField）
vue + elementUI中的滚动条el-scrollbar使用总结
热门推荐
是日前端
01-15 1万+
由于需要使用滚动条，原生滚动条长的太丑，查到了elementUI中的滚动条 el-scrollbar，使用简洁方便，样式如下： 使用方法如下： 外部的div必须给固定高度才行 <!-- 外部div --> <div style="height: 650px; display: flex" class="cab" > <el-scrollbar style="height:100%"> <!-- 内部div --> &l
可视化大屏 element-plus el-scroll 滚动条常见问题
黄彪博客
05-11 1064
通常，设计稿是按照 1920 * 1080 通用的高宽比设计的，开发显示器通常要用F11 全屏模式才能完全看到设计稿的原始效果，因此，在非全屏模式下想查看底部的内容，就需要使用el-scroll 组件来完成。在可视化大屏开发中，经常会用到 element-plus 库的 el-scroll 组件，在此整理一下通常的应用场景，方便自己后续复制代码 和 定位问题。因为可视化大屏是投在大屏上的，很少会有用户去手动操作，因此需要“自动展示”列表信息，就需要实现列表信息的滚动。缺点：耗CPU资源，效率不高。
Element Plus tabs标签配合Scrollbar使用
qq_51710516的博客
07-28 1668
遇到的问题是从未读切换到已读的时候，比如说未读标签页Scrollbar的位置在底部，切换到全部的时候Scrollbar的位置没有恢复到顶部。首先要判断，是在tabs标签页切换的时候触发让滚动条恢复到顶部的方法。我采用的方法是给滚动条打标签，就是用ref去绑定这个元素。在什么时候执行有了，再就是实现过程了。先在tabs标签页上绑定标签切换事件。参考ElementPlus官网文档。再去script里面去声明。...
对elementUIplus el-scrollbar添加拖拽滑动滚动条自定义指令 类似移动端纵向滑动
m0_68595471的博客
07-12 1525
【代码】对elementUIplus el-scrollbar添加拖拽滑动滚动条自定义指令 类似移动端纵向滑动。
vue3 +Element-puls ,table 中使用$refs修改scrollTop 到顶部
weixin_39475476的博客
12-09 3066
const elTableRef = ref(); //表格id
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值