基本概念

el-scrollbar：Element UI隐藏组件。

注意事项：

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

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

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

源代码

// reference /noeldelgado/gemini-scrollbar/blob/master/index.jsimport { 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 = `-${gutter}px`;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 = (<divref="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,<Barmove={ this.moveX }size={ this.sizeWidth }></Bar>,<Barverticalmove={ this.moveY }size={ this.sizeHeight }></Bar>]);} else {nodes = ([<divref="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-treeclass="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>

运行效果

参考文章

/p/6538698578f5/

/zhouweihua138/article/details/80077311