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之ElScrollBar组件滚动条的使用方法-创新互联
文章网址:http://pwwzsj.com/article/dhsipg.html