element vue 纵向滑动条_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 中表示不会写在文档中，需要用的自己看源码进行调用。

最终实现效果

实现步骤

一、阅读源码