element-plus 原生滚动条使用

最新推荐文章于 2024-04-07 10:47:35 发布
最新推荐文章于 2024-04-07 10:47:35 发布
阅读量1.9k 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
element-plus(element-plus@2.5.5) 本地离线资源
02-05
element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...
基于el-scrollbar封装滚动条
ZionHH的博客
08-24 401
基于el-scrollbar封装滚动组件，提供回到顶部、滚动放向、最大高度功能。
使用粘性定位实现列固定可左右滑动的table布局
weixin_43827779的博客
09-09 1163
<template> <div class="base-table"> <header class="base-table__title">表格标题</header> <div class="base-table__body list-content"> <table> <tr> <th>固定1</th> <
vue2滚动条el-scrollbar使用，滚动条移动和重置位置
最新发布
weixin_68397463的博客
04-07 788
滚动条重置位置方法封装。
vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置
NICKDL的博客
07-07 879
【代码】vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置。
Element Plus 实例详解（五）___Scrollbar 滚动条
逆境清醒的博客
03-26 6380
Element Plus Scrollbar 滚动条，用于替换浏览器原生滚动条。主要内容有：Scrollbar 滚动条基础用法，横向滚动Scrollbar用法，Scrollbar滚动条最大高度与元素高度关系，手动滚动Scrollbar滚动条。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5。
Element-ui滚动条el-scrollbar始终保持在底部
DDDInJava
01-04 5728
el-scrollbar是elementui隐藏的一个组件使用方法如下： <el-scrollbar style="height: calc(100vh - 200px);" ref="myScrollbar"> <p v-for="(message, index) in messages" :key="index"><span class="nick"> {{message.nick}} </span>:<br/>{{me
element-ui滚动条el-scrollbar置底
a2398936046的博客
11-08 1万+
element-ui滚动条el-scrollbar置底 在需要滚动的地方加上 &lt;el-scrollbar ref="myScrollbar" style="height: 600px"&gt;&lt;/el-scrollbar&gt; 方法 scrollDown() { this.$refs['myScrollbar'].wrap.scrollTop = this.$r...
element-plus离线文档
05-07
element-plus离线文档，node服务已经配置好，直接node server.js即可使用，可以在内网部署，已经部署成功。
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S ...
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
主要介绍了Element-ui之ElScrollBar组件滚动条的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
移动端登录界面，使用vue,element-plus
08-16
移动端登录界面
vue3 +Element-puls ,table 中使用$refs修改scrollTop 到顶部
weixin_39475476的博客
12-09 2955
const elTableRef = ref(); //表格id
Element-ui之ElScrollBar组件滚动条的使用
热门推荐
前端江湖
04-25 8万+
在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。在查看element文档时发现页面滚动条很精致，于是产生了灵感：能否使用element使用的滚动条组件呢？带着这个问题我们看这篇文章。
element的隐藏滚动条组件el-scrollbar
qq_45030898的博客
01-25 5724
隐藏滚动条组件el-scrollbar1.开发场景2.认识el-scrollbar组件3.隐藏横向滚动条 1.开发场景 这次做项目的时候，遇到了滚动条，自己用的也是elementui组件，突然发现一个隐藏的滚动条组件el-scrollbar,学习一下吧。 开始前，先看下成果吧 2.认识el-scrollbar组件 看了一篇element ScrollBar滚动组件源码深入分析的文章，感兴趣的同学可以自己再深掘一下，还是有意思的。el-scrollbar组件，首先要注意的是要设置高度。 <
element ui 组件el-scrollbar
忙碌的菠萝
11-02 1285
el-scrollbar 组件 当组件中内容过多时，展开后会产生滚动条影响外部整体样式，这个时候需要将滚动条放在组件内部，不让其变化影响其他组件。el-scrollbar可以实现这个功能 el-scrollbar实现菜单内部滚动条 <el-scrollbar style="height:100%;"> <el-menu class="sidebar-el-menu" default-active="1-4-1" @
element-ui中隐藏组件el-scrollbar的使用
云帆的博客
08-26 7405
一、使用 虽然官网没有介绍该组件，但是网上有许多小伙伴扒了源码并提供了使用方法 <el-scrollbar class="" view-class="" wrap-class="" tag=""> </el-scrollbar> 属性 props: { native: Boolean, // 是否使用本原生滚动条，设为true则不会启用element-ui自定义的滚动条 w
修改ElementUI默认滚动条的样式
一掬净土
07-30 2621
在全局样式里加入以下代码： #17B3A3 滚动条颜色，可以自行修改。 /**修改全局的滚动条*/ /**滚动条的宽度*/ ::-webkit-scrollbar { width: 8px; } //滚动条的滑块 ::-webkit-scrollbar-thumb { background-color: #17B3A3; border-radius: 3px; } //修改表格的滚动条 .el-table__body-wrapper::-webkit-scrollbar { width:
element-plus infinite scroll修改滚动条样式
10-17
要修改 element-plus 的 infinite scroll 组件的滚动条样式，可以通过以下步骤实现： 1. 在项目中安装 `sass` 和 `sass-loader`，如果已经安装则可以跳过此步骤。 ``` npm install sass sass-loader --save-dev ``` 2. 在 `main.js` 中引入 `element-plus` 的样式文件和自定义的样式文件。 ```js import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import './assets/styles/element-plus.scss' // 自定义样式文件 createApp(App).use(ElementPlus).mount('#app') ``` 3. 在自定义的样式文件中，覆盖 `el-scrollbar` 和 `el-scrollbar__thumb` 的样式。 ```scss // 修改滚动条样式 .el-scrollbar { &__thumb { background-color: #409eff; border-radius: 4px; } } ``` 4. 在需要使用 infinite scroll 的组件中，设置 `element-loading-text` 属性为 `false`，以隐藏默认的加载提示。 ```html <el-infinite-scroll :element-loading-text="false" @load="loadMoreData" :distance="10" > <!-- infinite scroll 内容 --> </el-infinite-scroll> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值