Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性

Posted 2022-06-14 Starzkg

基本概念

el-scrollbar：Element UI隐藏组件。

注意事项：

1.el-scrollbar的父层要有固定高度

2.el-scrollbar的高度要设成100%

3.如果出现横滚动条，添加overflow-x:hidden;

源代码

// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js

import  addResizeListener, removeResizeListener  from 'element-ui/src/utils/resize-event';
import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
import  toObject  from 'element-ui/src/utils/util';
import Bar from './bar';

/* istanbul ignore next */
export default 
  name: 'ElScrollbar',

  components:  Bar ,

  props: 
    native: Boolean,
    wrapStyle: ,
    wrapClass: ,
    viewClass: ,
    viewStyle: ,
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: 
      type: String,
      default: 'div'
    
  ,

  data() 
    return 
      sizeWidth: '0',
      sizeHeight: '0',
      moveX: 0,
      moveY: 0
    ;
  ,

  computed: 
    wrap() 
      return this.$refs.wrap;
    
  ,

  render(h) 
    let gutter = scrollbarWidth();
    let style = this.wrapStyle;

    if (gutter) 
      const gutterWith = `-$gutterpx`;
      const gutterStyle = `margin-bottom: $gutterWith; margin-right: $gutterWith;`;

      if (Array.isArray(this.wrapStyle)) 
        style = toObject(this.wrapStyle);
        style.marginRight = style.marginBottom = gutterWith;
       else if (typeof this.wrapStyle === 'string') 
        style += gutterStyle;
       else 
        style = gutterStyle;
      
    
    const view = h(this.tag, 
      class: ['el-scrollbar__view', this.viewClass],
      style: this.viewStyle,
      ref: 'resize'
    , this.$slots.default);
    const wrap = (
      <div
        ref="wrap"
        style= style 
        onScroll= this.handleScroll 
        class= [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] >
         [view] 
      </div>
    );
    let nodes;

    if (!this.native) 
      nodes = ([
        wrap,
        <Bar
          move= this.moveX 
          size= this.sizeWidth ></Bar>,
        <Bar
          vertical
          move= this.moveY 
          size= this.sizeHeight ></Bar>
      ]);
     else 
      nodes = ([
        <div
          ref="wrap"
          class= [this.wrapClass, 'el-scrollbar__wrap'] 
          style= style >
           [view] 
        </div>
      ]);
    
    return h('div',  class: 'el-scrollbar' , nodes);
  ,

  methods: 
    handleScroll() 
      const wrap = this.wrap;

      this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
      this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
    ,

    update() 
      let heightPercentage, widthPercentage;
      const wrap = this.wrap;
      if (!wrap) return;

      heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
      widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);

      this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
      this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
    
  ,

  mounted() 
    if (this.native) return;
    this.$nextTick(this.update);
    !this.noresize && addResizeListener(this.$refs.resize, this.update);
  ,

  beforeDestroy() 
    if (this.native) return;
    !this.noresize && removeResizeListener(this.$refs.resize, this.update);
  
;

问题分析 

通过阅读源码，scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性 

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

注： wrapStyle和viewStyle必须以分号;结尾。

代码示例

<el-scrollbar 
      wrap-class="list" wrap-style="overflow-x:hidden;" 
      view-class="view-box" view-style="font-weight: bold;height:100%;" 
      :native="false">
        <el-tree
          class="tree"
          :data="menuItems"
          node-key="id"
          :default-expanded-keys="expandedKeys"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
          :expand-on-click-node="false"
          :render-content="renderContent"
        >
        </el-tree>
</el-scrollbar>

运行效果

参考文章

https://www.jianshu.com/p/6538698578f5/

https://blog.csdn.net/zhouweihua138/article/details/80077311