Element-ui之ElScrollBar组件滚动条的使用方法

2023年6月20日发(作者：)

Element-ui之ElScrollBar组件滚动条的使⽤⽅法在使⽤vue + element-ui 搭建后台管理页⾯的时候，做了⼀个头部、侧栏、⾯包屑固定的布局，导航栏和主要内容区域当内容超出时⾃动滚动。使⽤的原因：原来是采⽤优化浏览器样式的⽅式，对滚动条进⾏样式调整。但这个⽅法并不兼容⽕狐浏览器，在⽕狐访问时依然是浏览器默认的滚动条样式。.sidebar { position: fixed; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; transition: transform .25s ease-out; width: 300px; z-index: 3;}.sidebar::-webkit-scrollbar { width: 4px}

.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px}

.sidebar:hover::-webkit-scrollbar-thumb { background: hsla(0,0%,53%,.4)}

.sidebar:hover::-webkit-scrollbar-track { background: hsla(0,0%,53%,.1)}灵感来源在翻看 element-ui官⽹的⽂档时，发现其左侧导航和右边的内容超出屏幕时，滚动条的样式⽐较⼩巧，通过浏览器审查⼯具查看，发现它是使⽤了el-scrollbar的样式，跟element-ui的组件样式命名⼀致。但⽂档中并没有关于这个 scrollbar组件的使⽤⽂档，搜索⼀番得知这是⼀个隐藏组件，官⽅在 github 的 issues 中表⽰不会写在⽂档中，需要⽤的⾃⼰看源码进⾏调⽤。最终实现效果实现步骤⼀、阅读源码通过阅读源码，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' }}⼆、在页⾯中使⽤ el-scrollbar组件源码源码在node_modules ⽬录下的 element-ui/packages/scrollbar模块⼊⼝，从main导⼊ scrollbar并提供⼀个安装⽅法注册成全局组件import Scrollbar from './src/main';

/* istanbul ignore next */l = function(Vue) { ent(, Scrollbar);};

export default Scrollbar;src/ 源码// reference /noeldelgado/gemini-scrollbar/blob/master/

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.$; } },

render(h) { let gutter = scrollbarWidth(); let style = yle;

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

if (y(yle)) { style = toObject(yle); Right = Bottom = gutterWith; } else if (typeof yle === 'string') { style += gutterStyle; } else { style = gutterStyle; } } const view = h(, { class: ['el-scrollbar__view', ass], style: yle, ref: 'resize' }, this.$t); const wrap = (

); let nodes;

if (!) { nodes = ([ wrap, , ]); } else { nodes = ([

]); } return h('div', { class: 'el-scrollbar' }, nodes); },

methods: { handleScroll() { const wrap = ;

= ((Top * 100) / Height); = ((Left * 100) / Width); },

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

heightPercentage = (Height * 100 / Height); widthPercentage = (Width * 100 / Width);

ight = (heightPercentage < 100) ? (heightPercentage + '%') : ''; dth = (widthPercentage < 100) ? (widthPercentage + '%') : ''; } }, mounted() { if () return; this.$nextTick(); !ze && addResizeListener(this.$, ); },

beforeDestroy() { if () return; !ze && removeResizeListener(this.$, ); }};⽰例

2023年6月20日发(作者：)

Element-ui之ElScrollBar组件滚动条的使⽤⽅法在使⽤vue + element-ui 搭建后台管理页⾯的时候，做了⼀个头部、侧栏、⾯包屑固定的布局，导航栏和主要内容区域当内容超出时⾃动滚动。使⽤的原因：原来是采⽤优化浏览器样式的⽅式，对滚动条进⾏样式调整。但这个⽅法并不兼容⽕狐浏览器，在⽕狐访问时依然是浏览器默认的滚动条样式。.sidebar { position: fixed; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; transition: transform .25s ease-out; width: 300px; z-index: 3;}.sidebar::-webkit-scrollbar { width: 4px}

.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px}

.sidebar:hover::-webkit-scrollbar-thumb { background: hsla(0,0%,53%,.4)}

.sidebar:hover::-webkit-scrollbar-track { background: hsla(0,0%,53%,.1)}灵感来源在翻看 element-ui官⽹的⽂档时，发现其左侧导航和右边的内容超出屏幕时，滚动条的样式⽐较⼩巧，通过浏览器审查⼯具查看，发现它是使⽤了el-scrollbar的样式，跟element-ui的组件样式命名⼀致。但⽂档中并没有关于这个 scrollbar组件的使⽤⽂档，搜索⼀番得知这是⼀个隐藏组件，官⽅在 github 的 issues 中表⽰不会写在⽂档中，需要⽤的⾃⼰看源码进⾏调⽤。最终实现效果实现步骤⼀、阅读源码通过阅读源码，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' }}⼆、在页⾯中使⽤ el-scrollbar组件源码源码在node_modules ⽬录下的 element-ui/packages/scrollbar模块⼊⼝，从main导⼊ scrollbar并提供⼀个安装⽅法注册成全局组件import Scrollbar from './src/main';

/* istanbul ignore next */l = function(Vue) { ent(, Scrollbar);};

export default Scrollbar;src/ 源码// reference /noeldelgado/gemini-scrollbar/blob/master/

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.$; } },

render(h) { let gutter = scrollbarWidth(); let style = yle;

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

if (y(yle)) { style = toObject(yle); Right = Bottom = gutterWith; } else if (typeof yle === 'string') { style += gutterStyle; } else { style = gutterStyle; } } const view = h(, { class: ['el-scrollbar__view', ass], style: yle, ref: 'resize' }, this.$t); const wrap = (

); let nodes;

if (!) { nodes = ([ wrap, , ]); } else { nodes = ([

]); } return h('div', { class: 'el-scrollbar' }, nodes); },

methods: { handleScroll() { const wrap = ;

= ((Top * 100) / Height); = ((Left * 100) / Width); },

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

heightPercentage = (Height * 100 / Height); widthPercentage = (Width * 100 / Width);

ight = (heightPercentage < 100) ? (heightPercentage + '%') : ''; dth = (widthPercentage < 100) ? (widthPercentage + '%') : ''; } }, mounted() { if () return; this.$nextTick(); !ze && addResizeListener(this.$, ); },

beforeDestroy() { if () return; !ze && removeResizeListener(this.$, ); }};⽰例