在翻看 element-ui官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件样式命名一致。但文档中并没有关于这个 scrollbar组件的使用文档,搜索一番得知这是一个隐藏组件,官方在 github 的 issues 中表示不会写在文档中,需要用的自己看源码进行调用。

1、使用

按需加载需要单独加载Scrollbar组件、并使用(可能会报无Scrollbar类的错误,但不影响使用),el-scrollbar需要设height(max-height是不行的)

    <el-scrollbar :native="false">
<div>
<p v-for="(item, index) in 200" :key="index">{{index}} 这里是一些文本。</p>
</div>
<el-scrollbar>

2、配置参数

props: {
native: Boolean, // 是否使用本地,设为true则不会启用element-ui自定义的滚动条
wrapStyle: {}, // 包裹层自定义样式
wrapClass: {}, // 包裹层自定义样式类
viewClass: {}, // 可滚动部分自定义样式类
viewStyle: {}, // 可滚动部分自定义样式
noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
tag: { // 生成的标签类型,默认使用 `div`标签包裹
type: String,
default: 'div'
}
}

3、源码位置

源码在node_modules 目录下的 element-ui/packages/scrollbar

模块入口index.js,从main导入 scrollbar并提供一个安装方法注册成全局组件

注意:隐藏X轴滚动条时,加上前缀,否则会影响el-select的下拉框样式。

.el-scrollbar__wrap {
overflow-x: hidden;
}

4、监听滚动位置

<el-scrollbar id="main" class="app-main" ref="myScrollbar">
<div class="content">
<h3>顶部</h3>
</div>
<div class="content">
<h3>Transfer 穿梭框</h3>
</div>
<div class="content">
<h3>Form 表单</h3>
</div>
<div class="content">
<h3>Table 表格</h3>
</div>
<div class="content">
<h3>Tag 标签</h3>
</div>
</el-scrollbar>
new Vue({
el: '#app',
data: function() {
return { visible: false }
},
mounted() {
this.handleScroll()
},
methods: {
handleScroll() {
let _self = this
let scrollbarEl = this.$refs.myScrollbar.wrap
scrollbarEl.onscroll = function() {
if(scrollbarEl.scrollTop > 200) {
_self.visible = true
} else {
_self.visible = false
}
}
},
}
})
												
											

Element-ui中ElScrollBar组件滚动条的使用的更多相关文章

  1. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  2. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  3. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  4. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  5. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  6. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  7. element ui 中的 resetFields() 报错'resetFields' of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  8. element ui中的一些小技巧

    最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台.  遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...

  9. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

随机推荐

  1. HttpModules配置事项

    前沿:还是那句话 ASP.NET管道,浏览器 - isAPI32.dll - HttpModules - HttpHandler - 返回客户端Web.Config:<httpModules&g ...

  2. PAT 1011 World Cup Betting 查找元素

    With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excite ...

  3. C# HttpClient 请求认证、数据传输笔记

    目录 一,授权认证 二,请求类型 三,数据传输 C# HttpClient 请求认证.数据传输笔记 一,授权认证 客户端请求服务器时,需要通过授权认证许可,方能获取服务器资源,目前比较常见的认证方式有 ...

  4. SpringCloud(五):断路器(Hystrix)和hystrixdashboard图实现链路追踪

    第一:关于服务调用和熔断安全: ribbon和Feign: 1. 相当于nigx+doubbe,微服务间的服务调用,API网关的请求转发等内容2. Feign整合了Ribbon和Hystrix  Hy ...

  5. iOS11自定义tabBar重影问题

    转载自:(主链接)https://www.jianshu.com/p/1be90349fdb4 https://www.cnblogs.com/coderYu/p/5859638.html 很实用,有 ...

  6. [iOS开发]关于cocoapods的使用

    CocoaPods的使用 关于CocoaPods,相信做iOS开发的应该都比较熟悉了.Cocoapods是一个用来管理第三方库的比较好用的管理工具.关于Cocoapods的东西不再多说,接下来进入正题 ...

  7. Java日期处理组件joda-time

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/175 Java日期处理组件joda-time 平常在开发过 ...

  8. css权重问题

    权重决定了你css规则怎样被浏览器解析直到生效.“css权重关系到你的css规则是怎样显示的 权重记忆口诀.从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10 ...

  9. Script - 检查当前的undo配置和建议设置 (Doc ID 1579035.1)

    Script - Check Current Undo Configuration and Advise Recommended Setup (Doc ID 1579035.1) APPLIES TO ...

  10. 2. Linux-3.14.12内存管理笔记【系统启动阶段的memblock算法(2)】

    memory:表示可用可分配的内存: 结束完memblock算法初始化前的准备工作,回到memblock算法初始化及其算法实现上面.memblock是一个很简单的算法. memblock算法的实现是, ...