改变浏览器滚动条样式

当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。
有时候我们需要自定义滚动条的样式，比如一开始就它显示，比如想改变滚动条的颜色，设置轨道的样式等

认识chrome下的滚动条

//设置scrollbar的为CSS伪元素，对应上图的数字
::-webkit-scrollbar              { /* 1 */ } //滚动条整体部分
::-webkit-scrollbar-button       { /* 2 */ } //滚动条两端的按钮
::-webkit-scrollbar-track        { /* 3 */ } // 外层轨道
::-webkit-scrollbar-track-piece  { /* 4 */ } //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb        { /* 5 */ } //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner       { /* 6 */ } //边角
::-webkit-resizer                { /* 7 */ } //定义右下角拖动块的样式

::-webkit-scrollbar {
  width: 0;
  height: 0;
}//实现chrome下，隐藏滚动条但是仍然可以滚动的功能

点击这边查看demo

修改firefox下的滚动条样式

火狐本身没办法通过CSS来自定义滚动条，但是可以通过一些JS库来模拟，例如perfect-scrollbar
perfect-scrollbar的使用方法很简单

import PerfectScrollbar from 'perfect-scrollbar'; //引入包

mounted() {
  this.$nextTick(() => {
    this.PerfectScrollbar = new PerfectScrollbar('#nav_wrapper'); //nav_wrapper是需要滚动的容器的id
  });
},

点击这里查看deno

修改IE下的滚动条样式

如果你们公司还没放弃IE的话…这里或许有你想要的