0%

el-scrollbar监听滚动条滚动事件,处理el-tabs滚动到顶部header吸顶效果

摘要:elememt-ui中使用el-scrollbar时监听scroll事件,处理el-tabs滚动到顶部时header部分吸顶效果

前言

网上关于el-scrollbar滚动事件监听的案例比较少,好不容易找到解决方法,记录一下,启发之处在这里,稍有改动

在vue中使用elememt-ui时,如果页面比较长需要滚动,我们想要优化浏览器侧边默认的滚动条该怎么做?因为默认滚动条特别丑又会默认加padding-left占据页面空间,对页面UI效果体验不是太好,所以在使用elememt-ui时我们通常使用el-scrollbar组件去优化滚动条,而el-scrollbar这个组件官方并没有明确说明,所以对其中的一些属性很陌生,本文主要介绍如何使用el-scrollbar对滚动事件进行监听,达到导航吸顶效果。

图示

刚加载完页面时,tabs标题区域距离顶部有一段距离

图示

当向上滑动时,tabs-header到顶部时固定在顶部,下滑时在恢复原位

图示

el-scrollbar 的使用

el-scrollbar 使用起来很简单,在使用时要设置外层容器高度,并且要设置el-scrollbar 的高度为100%

1
2
3
.el-scrollbar__wrap{
overflow-x: hidden;
}

注意(巨坑):如果项目中用到很多el-scrollbar组件,把.el-scrollbar__wrap写成全局样式的时候,一定不能直接写在全局,否则会影响到el-cascader、el-select之类的组件(导致组件下滑到底部时最后一个元素会被遮挡一部分),原因是el-cascader、el-select这些组件是类似弹窗自动生成到script标签之下,也就是在body上追加的元素,写到全局会对其造成影响,要在其外层包裹主页面的class或id名,或者嵌套在其父级标签下。

例如

1
2
3
4
5
#app{
.el-scrollbar__wrap{
overflow-x: hidden;
}
}

然后使用下面代码

1
2
3
4
5
6
7
<el-scrollbar ref="scrollbar" style="height:100%">
<el-tabs :class="isFixedTop && 'tabs-fixed-top'">
<el-tab-pane></el-tab-pane>
...
<el-tab-pane></el-tab-pane>
</el-tabs>
</el-scrollbar>

el-scrollbar 监听滚动事件

js代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
new Vue({
el: '#app',
data() {
return { isFixedTop: false }
},
mounted() {
this.handleScroll()
},
methods: {
handleScroll() {
let scrollbarEl = this.$refs.scrollbar.wrap
scrollbarEl.onscroll = () => {
if(scrollbarEl.scrollTop > 135) {
this.isFixedTop = true
} else {
this.isFixedTop = false
}
}
}
}
})

135 为el-tabs到浏览器顶部的距离,这里可以传入动态参数动态获取,我这里没有必要了

css 部分(需求不同,仅供参考)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 滚动导航顶部贴顶效果 */
.tabs-fixed-top{
.el-tabs__header{
width: 100%;
position: fixed;
top: 40px;
left: 0;
z-index: 20;
padding-left: 24px;
background-color: #fff;
border-bottom: 2px solid #E4E7ED;
}
.el-tabs__content{
padding-top: 63px;
}
.el-tabs__nav-wrap::after{
content: normal;
}
}
-------------本文结束感谢您的阅读-------------