基本概念

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.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>

運行效果

參考文章

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

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

總結

以上是生活随笔為你收集整理的Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。