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

全局 样式修改

/*滚动条凹槽的颜色，还可以设置边框属性 */
  ::-webkit-scrollbar-track-piece {
    background-color:#f8f8f8;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /*滚动条的宽度*/
  ::-webkit-scrollbar {
    width:9px;
  }
  /*滚动条的设置*/
  ::-webkit-scrollbar-thumb {
    background-color:#dddddd;
    background-clip:padding-box;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /*滚动条鼠标移上去*/
  ::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
  }

效果

image.png

//elementui 所有dialog增加滚动条 同时使用 体验更好
.el-dialog{
    position:absolute;
    top:50%;
    left:50%;
    margin:0 !important;
    transform:translate(-50%, -50%);
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
    display:flex;
    flex-direction:column;
  }
  .el-dialog__body{
    overflow: auto;
  }

配合