element-ui中隐藏组件el-scrollbar的使用

1 使用

• 虽然官网没有介绍该组件，但是网上有许多小伙伴扒了源码并提供了使用方法

<el-scrollbar class=""
              view-class=""
              wrap-class=""
              tag="">
</el-scrollbar>

• 属性

props: {
    native: Boolean,  // 是否使用本原生滚动条，设为true则不会启用element-ui自定义的滚动条
    wrapStyle: {},    // 包裹层自定义样式
    wrapClass: {},    // 包裹层自定义样式类
    viewClass: {},    // 视图层部分自定义样式类
    viewStyle: {},    // 视图层部分自定义样式
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {             // 生成的标签类型，默认使用 `div`标签包裹
      type: String,
      default: 'div'
    }
}

2 Dom结构解析

• el-scrollbar - 最外层容器

  • el-scrollbar__wrap - 包裹层，用于遮挡住原生滚动条（看margin属性就知道，负数）
    

    • el-scrollbar__view - 视图层，无大小限制，用于撑开包裹层

  • el-scrollbar__bar is-horizontal - 水平导轨

    • el-scrollbar__thumb - 内部滑块

  • el-scrollbar__bar is-vertical - 垂直导轨

    • el-scrollbar__thumb - 内部滑块

• 别人的一张图，很直观
  

3 样式优化

• 如果不做样式优化，你会发现原生水平滚动条会显示出来，并且与el-scrollbar的水平滚动条重叠
  

• 那么我们加上以下样式，这也是网上大多的解决方案

.el-scrollbar__wrap {
   overflow-x: hidden; 
}
// or
.el-scrollbar {
  .el-scrollbar__wrap {
     overflow-x: hidden;
    .el-scrollbar__view {
    }
  }
}

• 原生水平滚动条确实消失了，但是你会发现由于其被隐藏导致无法使用快捷键“shift+鼠标滚轮”水平滚动了，这样体验就很差了，最终方案如下

// 使用el-scrollbar时，请加上此样式类
.my-scrollbar {
  height: 100%;
  width: 100%;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  .el-scrollbar__wrap {
    // 横竖滚动条都直接显示出来，height加上17px把滚动条隐藏掉
    // width已在el-scrollbar内部样式处理了
    // overflow: scroll; // 不能设置为overflow-x:hidden,滚动条会重叠
    // height: calc(100% + 17px);
    // width: calc(100% + 17px);
    // 使用margin负值方案在移动端会出现高度、宽度异常问题，改为以下方案
    height: 100%;
    overflow: auto;
    margin: 0 !important;
    // 火狐
    scrollbar-width: none !important;
    // IE
    -ms-overflow-style: none;
    // 谷歌
    &::-webkit-scrollbar {
      display: none !important;
    }
    &::-webkit-scrollbar {
      display: none;
      width: 0 !important;
    }
    &.el-scrollbar__wrap--hidden-default {
      height: 100% !important;
    }
    &.el-scrollbar__view {
    }
  }
  > .el-scrollbar__bar {
    z-index: 1999;
    &.is-horizontal {
    }
    &.is-vertical {
    }
  }
  .el-scrollbar__thumb {
    background: lightgray;
    transition: background 0.4s;
  }
  .el-scrollbar__thumb:hover {
    background: darkgray;
  }
}

• 可以愉快的用快捷键滚动了
  

PS：在使用过程中发现有时候内层或外层容器变化时，滑块长度不正确（如window.resize事件），是需要手动调用内部的update方法的.

这几篇文章剖析了如何实现自定义滚动条并且对el-scrollbar源码解析，有兴趣的可以看看

• Element-ui el-scrollbar 源码解析
• element ScrollBar滚动组件源码深入分析

2020-09-10

• 最近看到vue-element-admin源码中对el-scrollbar鼠标滚轮事件进行了监听，这也是一种解决办法，就不用写样式了

<template>
  <el-scrollbar ref="scrollContainer"
                :vertical="false"
                class="scroll-container"
                @wheel.native.prevent="handleScroll">
    <slot />
  </el-scrollbar>
</template>

  computed: {
    scrollWrapper() {
      return this.$refs.scrollContainer.$refs.wrap
    }
  },
  methods: {
    ...
    // 当鼠标滚轮滚动时，控制滚动条移动
    handleScroll(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 40
      const $scrollWrapper = this.scrollWrapper
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
      this.$emit('scroll')
    },
    ...
   }

2022-04-06

使用margin负值方案在移动端会出现高度、宽度异常问题，已贴上修复方案