码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-11 15:39:36      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:lazy   turn   关于   处理   ade   llb   不容易   scrolltop   区域   

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

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

标签:lazy   turn   关于   处理   ade   llb   不容易   scrolltop   区域   

原文地址:https://www.cnblogs.com/lwlblog/p/13283681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!