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)
}