修改webkit内核浏览器默认滚动条样式

vue 项目 参考飞书滚动条样式

1、在main.js中找到全局css样式文件位置，一般名称global.scss，本项目中名称为index.scss.

import Element from 'element-ui'
import './styles/element-variables.scss'

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

2、加入自定义滚动条样式代码

// 滚动条
::-webkit-scrollbar{
  width: 7px;
  height: 7px;
  background-color: #ffffff;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(82, 82, 82, 0.3);
  border-radius: 10px;
  background-color: #ffffff;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  background-color: #c8c8c8;
}
/*鼠标悬浮和点击颜色加深*/
::-webkit-scrollbar-thumb:hover
{ 
    background-color:#b4b8c0;
}
::-webkit-scrollbar-thumb:active  {
    background-color:#909399;
}

3、与默认进度条样式对比