用Vuelelement-UI设置后台管理页面时，做了页眉、侧边栏、面包屑的固定布局，内容超出时导航栏、主内容区自动滚动。

使用原因：

原来滚动条的样式是通过优化浏览器样式来调整的。但是这种方法与Firefox不兼容，在Firefox访问时仍然是浏览器默认的滚动条样式。侧边栏{ position:固定；border-right: 1px实心rgba(0，0，0， 07)；溢出-y:自动；绝对位置：top : 0；bottom : 0；left : 0；transition:变压器. 25s缓解；宽度： 300 px；z-index : 3；} . sidbar :-web kit-scroll bar { width : 4px } . sidbar :-web kit-scroll bar-thumb { background : transparent；border-radius : 4px } . sidbar : hover :-WebKit-scroll bar-thumb { background : HSLA(0，0%，53%， 4)} . sidbar : haver 3360-WebKit-scroll bar-track { background : HSLA(0，0%，53%， 1)}灵感来源

翻看element-ui官网的文档时发现，当左导航和右内容都在屏幕之外时，滚动条的样式相对较小。用浏览器查看工具查看，发现使用了el-scrollbar的样式，命名方式和element-ui的组件样式一样。但是，文档中没有关于这个滚动条组件的使用的文档。搜索后知道是隐藏组件。这位官员在github的问题中说，它不会写在文档中，需要通过阅读源代码来调用。

最终达到效果

实施步骤

首先，阅读源代码

通过阅读源代码，scrollbar组件公开了七个道具属性：native、wrapstyle、wrapclass、viewclass、viewstyle、noresize和tag

Props: { native: boolean，//是否使用local，如果设置为true，将不会启用element-ui定义的滚动条wrapstyle3360 {}，//包装层自定义样式wrapClass: {}，//包装层自定义样式类viewClass: {}，//可滚动部分自定义样式类viewClass: { }，//可滚动部分自定义样式noresize: Boolean，//如果容器大小不变，最好设置可以优化性能tag:的标记类型默认情况下，标记“div”用于包装Type:string和default 3360“div”} }其次，使用页面中的el-scrollbar组件

template div El-scrollbar : native=' false ' wrap style=' wrap class=' view class=' view style=' noresize=' false ' tag=' section ' div p v-for='(item，index)在200 ' : key=' index/p/div El-scroll bar/div/template中，上面的代码是El-scroll bar的用法，不需要编写不需要的属性。

源代码

node_modules目录中包含源代码的元素-用户界面/包/滚动条

模块入口index.js，从main导入scrollbar，并提供一个安装方法来注册为全局组件

从“”导入滚动条。/src/main '；/*伊斯坦布尔忽略下一个*/scroll bar . install=function(Vue){ Vue.component(scroll bar . name，scroll bar)；};导出默认滚动条；Src/main.js源代码

//引用" element-ui/src/utils/resize-event "中的https://github。com/noeldelgado/Gemini-滚动条/blob/母版/索引。jsimport { addResizeListener，removeResizeListener }；从"元素-ui/src/utils/滚动条宽度-宽度"导入滚动条宽度从" element-ui/src/utils/util "导入{ TooObject }；从""导入栏“/bar”；/*伊斯坦布尔忽略下一个*/导出默认{ name: 'ElScrollbar '，组件： { Bar }，props: { native:布尔值，wrapStyle: {}，wrapClass: {}，viewClass: {}，viewStyle: {}，noresize:布尔值，//如果容器尺寸不会发生变化，最好设置它可以优化性能tag: { type: String，default: 'div' }，data() { return { sizeWidth: '0 '，sizeHeight: '0 '，move x : 0 0 0，move y : 0 0 }；}，computed : { wrap()}返回此$ refs.wrap} }，render(h){ let gutter=scrollbarWidth()；让风格=这个。包装样式；if(gutter){ const gutter with=`-$ { gutter } px `；const GutterSTYLe=` margin-bottom : $ { GutterWith }；右边距： $ { gutterWith }；`;if(数组。伊萨瑞(这。wrap style)){ style=to object(this。包装样式)；风格。右边距=样式。边距底部=檐槽；} else if(这种类型。wrap style==' string '){ style=Gutterstyle；} else { style=gutterStyle } } const view=h(this . tag，{ class :[' El-滚动条_ _ view '，this.viewClass]，style: this.viewStyle，ref: 'resize' }，this .$老虎机。默认)；const wrap=(div ref=' wrap ' style={ style } onScroll={ this。handlescroll } class={[this。换行类，' el-scrollbar__wrap '，装订线？': ' El-滚动条_ _ wrap-hidden-default ']} {[view]}/div)；让节点；if(！this.native) { nodes=([ wrap，Bar move={ this。movex } size={ this。尺寸宽度}/条形，条形垂直移动={这个。movey } size={ this。sizeheight }/[Bar])；} else { nodes=([div ref=' wrap ' class={[this。wrap类，' El-滚动条_ _ wrap ']} style={ style } {[view]}/div])；}返回h('div '，{ class: 'el-scrollbar' }，节点)；}，方法： { handleScroll(){ const wrap=this。包裹；这个。movey=((换行。向上滚动* 100)/环绕。客户端高度)；这个。movex=((换行。scroll ft * 100)/包装。客户端宽度)；}，update(){ 0让heightPercentage，width percentage const wrap=this . wrap if(！包装)返回；高度百分比=(包装。客户端高度* 100/包。滚动高度)；宽度百分比=(包装。客户端宽度* 100/包。scroll width)；这个。sizeheight=(高度百分比100)？（高百分比"%"):"";这个。尺寸宽度=(宽度百分比100)？（宽度百分比"%"):"";} }，挂载(){ if (this.native)返回；这个$ NextTick(这个。更新)；这个。没有调整大小添加调整大小监听器(这.$refs.resize，这个。更新)；}，beforeDestroy() { if (this.native)返回；这个。没有调整大小移除调整大小监听器(这.$refs.resize，这个。更新)；}};示例

div style=' height: 100vh '！-注意需要给埃尔滚动条设置高度，判断是否滚动是看它的高度判断的-El-滚动条样式='高度： 100%；'！-滚动条-div style=' height : 500 px；宽度： 100%;背景：红色/div div style=' height : 500 px；宽度： 100%;背景：黄绿色/div div style=' height : 500 px；宽度： 100%;背景蓝紫色'/div/El-滚动条！- /滚动条- /div以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。