最近使用vue在做pc端项目,需要处理滚动条样式外加滚动加载。
使用了betterscroll和perfectscroll发现前者还是更偏向于移动端(也可能我比较着急没用明白),
后者在ie11上面拖拽滚动条的时候会闪动,会有兼容性问题。
经同事点播,最终使用了element-ui里面的scrollbar,发现还真是不错,用着简单而且兼容性好。
所以,来看看源码是怎么实现的,学习学习,进步进步。
先看一下怎么使用,便于理解组件的设计思路
<el-scrollbar class="content-table" :tag="'div'">
<div v-for="(info, idx) in tab.humanInfo" :key="idx">
<div></div>
</div>
</el-scrollbar>
如上图代码,直接把会很长的需要滚动的内容放到el-scrollbar组件里面就好,其他细节不做赘述。
生成的html代码如下,这张图pic-html的内容后面会多次提及。
根据对照页面上的效果可知,div.el-scrollbar是最外层的容器,可以通过写自己的class来添加出现滚动条的高度。
.el-scrollbar{
overflow: hidden;
position: relative;
}
div.el-scrollbar__wrap是实际上真正用来包裹内容并产生滚动条的容器,高度100%,div.el-scrollbar__view里面就是我们自己写的需要滚动的内容。
.el-scrollbar__wrap{
overflow: scroll;
height: 100%;
}
div.el-scrollbar__bar是滚动条的轨道,分为横向和纵向,横向为is-horizontal,纵向为is-vertical,两者其实差不多,就只关注纵向了。鼠标划入划出滚动区域,滚动条会随之显示隐藏。
.el-scrollbar__bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 4px;
opacity: 0;
-webkit-transition: opacity 120ms ease-out;
transition: opacity 120ms ease-out;
}
.el-scrollbar__bar.is-vertical {
width: 6px;
top: 2px;
}
div.el-scrollbar__thumb在div.el-scrollbar__bar内部,作为滚动条,hover会产生背景色的变化
.el-scrollbar__thumb {
position: relative;
display: block;
width: 0;
height: 0;
cursor: pointer;
border-radius: inherit;
background-color: rgba(144,147,153,.3);
-webkit-transition: .3s background-color;
transition: .3s background-color;
}
ok,到这里就把html结构大致分析完了,接着来看源码了,看看到底咋回事儿了
scrollbar/src/main.js就是组件主入口文件了,首先看一下里面写了什么
props: {
native: Boolean,
wrapStyle: {},
wrapClass: {},
viewClass: {},
viewStyle: {},
noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
tag: {
type: String,
default: 'div'
}
},
props主要传入内联样式和自定义class,都以默认值来分析代码降低不必要的复杂度
dat