element-plus 原生滚动条使用

最新推荐文章于 2025-10-17 14:08:34 发布
原创 最新推荐文章于 2025-10-17 14:08:34 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #elementui

本文讲述了在使用Element Plus时遇到的滚动条问题，尤其是在电阻屏设备上滚动不便。作者尝试改造Element Plus内置的el-scroll组件样式未果，最后通过设置`scrollbarProps`的`native`属性为`true`，并定制原生滚动条样式，成功解决了问题，实现了UI需求。

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

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

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

 

 

 

 

xzyuan
关注
vue3 - element plus表格自动循环滚动，Table表格组件每隔N秒无限滚动翻阅功能，el-table表格定时自动滚动（每秒自动向下滚动一行，当鼠标移入表格时停止滚动，移出表格继续滚动）
高级前端工程师
05-10 3659
el-table表格自动滚动，Element表格自动滚动，table实现自动循环滚动，自动每隔一段时间滚动翻阅，element-plus el-table表格自动循环滚动指令插件，定时自动滚动效果，自动滚动组件，表格自动循环滚动指令插件，用Vue3实现element-plus表格实现自动滚动，Vue3+ElementPlus插件:表格每秒自动滚动，实现表格自动向下滚动，表格实现表格数据动态滚动（无限滚动）详细示例代码，vue3+element plus表格向下翻滚无限循环，Vue3表格滚动实现，vue3如何
使用粘性定位实现列固定可左右滑动的table布局
weixin_43827779的博客
09-09 1365
<template> <div class="base-table"> <header class="base-table__title">表格标题</header> <div class="base-table__body list-content"> <table> <tr> <th>固定1</th> <
elementui组件—— el-scroll的使用
热门推荐
Misko的博客
08-29 1万+
项目开发中使用到了elementui组件，后期发现浏览器中的滚动条不仅占宽，还与页面暗色风格不搭配。于是打算寻找一款插件使用，而elementui中的scroll组件刚好满足需要而且兼容ie10+。 官网侧边栏中scroll的使用截图 使用方法 直接在页面中调用el-scroll组件 <el-scrollbar style="height: 325px;width: 300px;"...
Vue + Element UI 实现 el-scroll 滚动与鼠标滚轮监听全攻略
最新发布
IT古董
10-17 1280
本文详细介绍了在Vue+ElementUI项目中监听el-scrollbar滚动事件的实用技巧。主要内容包括：1）基础滚动监听获取scrollTop/Left；2）滚动到底触发加载更多的实现；3）通过wheel事件捕获鼠标滚轮方向；4）阻止默认滚动实现自定义控制。文章提供了完整代码示例，帮助开发者掌握el-scrollbar的核心交互功能，提升页面滚动交互体验。适合需要实现懒加载、自定义滚动行为等场景的前端开发者参考。
Element UI【详解】el-scrollbar 滚动条组件
yang295242361的博客
08-15 1万+
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
Element Plus 实例详解（五）___Scrollbar 滚动条
逆境清醒的博客
03-26 1万+
Element Plus Scrollbar 滚动条，用于替换浏览器原生滚动条。主要内容有：Scrollbar 滚动条基础用法，横向滚动Scrollbar用法，Scrollbar滚动条最大高度与元素高度关系，手动滚动Scrollbar滚动条。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5。
【ElementPlus源码】Scrollbar 滚动条
karshey的博客
07-01 1599
Scrollbar 滚动条组件从里到外分为三个组件：thumb（滚动条的可拖动部分）、bar（thumb的相关信息）和Scrollbar（滚动条组件）。此方法做的事情是：将滚动条thumb移动到点击位置，并相应地调整滚动区域的滚动位置。，可以在elementPlus滚动条的文档中试验一下，拖动滚动条结束后，滚动条的显示会消失。鼠标移动时，函数会根据鼠标位置更新滚动条thumb的位置，并调整滚动区域的滚动位置。通俗的语言就是：点击滚动条然后拖动，滚动条和滚动区域都会更新位置，就做了这样的事情。
element-plus 全局滚动条控制，隐藏掉，但不能印象滚动效果
07-02
由于浏览器默认的滚动条样式无法直接通过 JavaScript 控制，通常的做法是使用 CSS 来隐藏原生滚动条，并通过自定义样式或行为模拟滚动效果。 ### 隐藏全局滚动条但保留滚动功能 #### 方法一：通过 CSS 隐藏滚动条 ...
Element-UI 给el-dropdown添加滚动条
ddk54321的博客
04-08 9735
Element-UI 官方文档中没有给出下拉菜单（el-dropdown）设置滚动条的方法。 但是又没有试验出为下拉菜单添加el-scrollbar的使用方法。 所以直接修改的自带的滚动条样式。 下拉菜单el-dropdwn的HTML代码： <!-- 未归档项目下拉框 --> <el-dropdown class="project-container" @comm...
vue3element-plus 滚动条匀速滚动
06-19
### Vue3 和 Element-Plus 实现滚动条匀速滚动效果的方法 在 Vue3 和 Element-Plus 中实现滚动条的匀速滚动效果，可以通过结合 CSS 的 `transition` 属性和 JavaScript 的定时器来完成。以下是具体实现方式： ####...
vue3 element-plus el-table 获取滚动条位置
11-30
在 Vue3 中，如果你想要获取 Element Plus 的 `el-table` 组件的滚动条位置，你可以通过给 `table` 元素添加 `ref` 变量，并利用 `vue-ref-next` 或者原生的 JavaScript 来访问其滚动条属性。这里是一个简单的例子：...
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-plus el-scrollbar 滚轮横向滚动
zezejingi的博客
01-09 2217
element-plus el-scrollbar 滚轮横向滚动
vue3下使用elementplus的el-scrollbar美化滚动条及触底加载
lfYexun的博客
12-18 5113
el-scrollbar有一个触底加载的坑点，就是加载后内容高度增加了，但是滚动条位置没有跟着变化，所以需要用手动触发官方写的setScrollTop方法进行重置，就可以了。
element-plus 的el-scrollbar滚动条组件
lucky_ly的博客
06-09 1745
el-scrollbar组件可以替换原生的滚动条，可以设置出现滚动条的高度，若无设置则根据容器自适应。通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。scroll 滚动条的滚动事件，会返回滚动条当前的位置。
Element-UI Plus 给el-dropdown添加滚动条效果
RRRRRRichard的博客
03-01 2998
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 ui plus Form 表单验证失败后，自动滚动到失败的位置（validate）（scrollToField）
shmilyyxj的博客
08-31 4052
Element ui plus Form 表单验证失败后，自动滚动到失败的位置（validate）（scrollToField）
Element-Plus的Scroll-bar组件手动设置滚动+菜单缓存功能
winterFlower1314的博客
12-17 2065
我们接下来的任务就是使用Scrollbar组件实现如图所示的功能菜单缓存：根据实际菜单项生成缓存菜单列表路由跳转： 点击缓存的菜单tag列表， 可以实现路由的跳转删除菜单：点击菜单tag , 可以删除缓存的菜单，并实现路由的自动跳转手动滑动：点击左右箭头实现滑动的效果激活菜单展示： 匹配当前路由对应的菜单自动滚动到视野区域假如实际菜单路由如图所示(参考的网站：https://crmeb.com/)// 自动滚动到新增的tag， 出现在视野区域// 获取滚动容器。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值