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

Posted 2020-12-17 lwlblog

摘要：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 使用起来很简单，首先要保证要包裹元素的父级高度为100%，然后使用下面代码

<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;
  }
}