CSS3更改原生滚动条的样式

话不多说直接上代码:

/*滚动条样式*/
   .scrollbar::-webkit-scrollbar {
     /*滚动条整体样式*/
     width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
     height: 4px;
   }
   .scrollbar::-webkit-scrollbar-thumb {
     /*滚动条里面小方块*/
     border-radius: 5px;
     -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     background: rgba(0, 0, 0, 0.2);
   }
   .scrollbar::-webkit-scrollbar-track {
     /*滚动条里面轨道*/
     -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     border-radius: 0;
     background: rgba(0, 0, 0, 0.1);
   }

效果如下:
CSS3更改原生滚动条的样式_第1张图片

你可能感兴趣的:(javascript,vue,滚动条,滚动条样式)