摘要：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%
.el-scrollbar__wrap{
overflow-x: hidden;
}
注意~~（巨坑）：如果项目中用到很多el-scrollbar组件，把.el-scrollbar__wrap写成全局样式的时候，一定不能直接写在全局，否则会影响到el-cascader、el-select之类的组件（导致组件下滑到底部时最后一个元素会被遮挡一部分），原因是el-cascader、el-select这些组件是类似弹窗自动生成到script标签之下，也就是在body上追加的元素，写到全局会对其造成影响，要在其外层包裹主页面的class或id名，或者嵌套在其父级标签下。
例如
#app{
.el-scrollbar__wrap{
overflow-x: hidden;
}
}
然后使用下面代码
<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代码如下
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 部分（需求不同，仅供参考）
/* 滚动导航顶部贴顶效果 */
.tabs-fixed-top{
.el-tabs__header{
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;
}
}