摘要：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{
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;
}
}