修改滚动条样式 （代码记录）

 

.example {

  &::-webkit-scrollbar {

     //  滚动条整体样式（设置滚动条高度就行了）

    height: 15px;

    width: 14px;

    background: rgba(117, 180, 253, 0.2);

    box-shadow: 0rem 0.01rem 0.01rem 0rem rgba(1, 69, 132, 0.5);

    border-radius: 6px;

  }

  &::-webkit-scrollbar-track {

    /*滚动条里面轨道*/

    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

    border-radius: 10px;

  }

  &::-webkit-scrollbar-thumb {

    /*滚动条里面小方块*/

    // border-radius:8px;

    // background: rgba(138, 191, 253, 1);

    // box-shadow: 0px 1px 3px 0px rgba(44, 47, 49, 0.4);

    border-radius: 10px;

    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

    background: #eee;

  }

  /*滚动条的上下两端的按钮*/

  // &::-webkit-scrollbar-button {

  //   height: 0px;

  // }

}