写在前面
浏览器默认的滚动条样式不是很美观;
其实,在 element-UI 中有一个隐藏组件 <el-scrollbar>
,这个组件的滚动条还是很不错的,比原生的滚动条好看,而且还有一些效果(鼠标移入时显示,移出时隐藏)。
所以,我们直接使用它就省事很多啦~
开始使用
<el-scrollbar>
// 包裹你的内容
</el-scrollbar>
这个组件还有一些属性值可以传递:(不过一般用不着)
props: {
native: Boolean,
wrapStyle: {}, // 外层盒子的样式
wrapClass: {}, // 外层盒子的class
viewClass: {}, // 内层盒子的class
viewStyle: {}, // 内层盒子的样式
noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
tag: {
type: String,
default: 'div'
}
}
el-scrollbar
将会作为你的容器最外层,也是滚动条的容器;
一个比较好的使用方式是: 给 el-scrollbar
加上 ref
以及 class
用来定义宽度和高度。
需要注意的是: 在
el-scrollbar
上定义maxHeight
、maxWidth
将无法实现预期效果。
滚动到自定义位置
假设现在滚动条滚到了底部,如果将其滚到我们想要的位置
<el-scrollbarl ref="scroll">
// ...
</el-scrollbar>
可以使用如下代码:
this.$refs['scroll'].wrap.scrollTop = 0 //想滚到哪个高度,就写多少
为了让整个滚动更加丝滑,我们再加上滚动动画:
<el-scrollbarl ref="scroll">
// ...
</el-scrollbar>
<el-button @click="toTop">滚动到顶部</el-button>
<script>
const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
? cubic(value * 2) / 2
: 1 - cubic((1 - value) * 2) / 2;
//...
methods: {
toTop() {
// el-scrollbar 容器
const el = this.$refs['scroll'].wrap;
const beginTime = Date.now();
const beginValue = el.scrollTop;
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
const frameFunc = () => {
const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {
el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
rAF(frameFunc);
} else {
el.scrollTop = 0;
}
};
rAF(frameFunc);
}
}
//...
</script>
动态滚动条
内容高度小于100px 的时候,区域随内容高度自适应;内容高度大于 100px 时显示滚动条。
<el-scrollbar ref="scroll" :style="{height: getHeight()}">
<div v-for="item of dataList">
//...
</div>
</el-scrollbar>
<script>
//...
methods: {
getHeight() {
if(this.dataList.length>5) {
return '100px'
} else {
return 'auto'
}
}
}
//...
</script>
-----------------(正文完)------------------
前端学习交流群,想进来面基的,可以加群:
或者手动search群号:685486827,832485817;
-------------------------------- (完)--------------------------------------
我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu
更多学习资源请关注我的新浪微博…