css 修改滚动条样式

css 修改滚动条样式

• 修改el-table滚动条样式

<style lang="less" scoped>
.el-table {
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 10px;
      height: 10px;
  }
  /*滚动条轨道 */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/
      border-radius: 10px; 
      background-color: #071e4a; 
  }
  /*滑块 */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/
      border-radius: 10px;
      background-color: #00a0e9; 
  }
}
</style>

• 全局修改滚动条样式

<style lang="scss">
::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: #ebeef5;
}
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #ccc;
}
::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}
</style>