css 滚动条美化

1.

::-webkit-scrollbar {

  width: 6px;

  height: 6px;

}

::-webkit-scrollbar-track {

  width: 6px;

  background: rgba(#101F1C, 0.1);

  -webkit-border-radius: 2em;

  -moz-border-radius: 2em;

  border-radius: 2em;

}

::-webkit-scrollbar-thumb {

  background-color: rgba(#101F1C, 0.5);

  background-clip: padding-box;

  min-height: 28px;

  -webkit-border-radius: 2em;

  -moz-border-radius: 2em;

  border-radius: 2em;

}

::-webkit-scrollbar-thumb:hover {

  background-color: rgba(#101F1C, 1);

}

2.

::-webkit-scrollbar {

    width: 5px;

    height: 5px;

    background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb{

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

    background-color: #bdbdbd;

}

::-webkit-scrollbar-thumb:hover{

    border-radius: 5px;

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

    background: rgba(0,0,0,0.2);

}

此乃个人学习小笔记