css：自定义浏览器中滚动条scroll的样式

参数说明

1. ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
2. ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
3. ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
4. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）。
5. ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
6. ::-webkit-scrollbar-corner 边角
7. ::-webkit-resizer 定义右下角拖动块的样式

代码示例：

  
    
    
    Demo
    
      /* 外层容器 */
      #box {
        height: 500px;
        width: 500px;
        background-color: #eeeeee;
        overflow: auto;
      }

      /* 滚动条整体部分 */
      #box::-webkit-scrollbar {
        /* Y轴滚动条宽度 */
        width: 6px;
        /* X轴滚动条高度 */
        height: 12px;
      }

      /* 外层轨道 */
      #box::-webkit-scrollbar-track {
        background: #efefef;
        border-radius: 2px;
      }

      /*  内层轨道 */
      #box::-webkit-scrollbar-track-piece {
        background-color: blue;
      }

      /* 滚动条两端的按钮 */
      #box::-webkit-scrollbar-button {
        background-color: red;
      }

      /* 滚动条里面的滑块 */
      #box::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 10px;
      }

      #box::-webkit-scrollbar-thumb:hover {
        background: #888888;
      }

      /* 边角，即两个滚动条的交汇处 */
      #box::-webkit-scrollbar-corner {
        background: #179a16;
      }

      /* 定义右下角拖动块的样式 */
      #box::-webkit-resizer {
        background: red;
      }

      /* 内层容器 */
      #app {
        height: 2000px;
        width: 2000px;
      }
    
  

  
    
      
    
  

实现效果

参考 浏览器滚动条样式

常用的样式

css

.box::-webkit-scrollbar {
  width: 3px;
}

.box::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 20px;
  transition: background-color 0.3s;
}

less

.box {
    /* 滚动条整体部分 */
	&::-webkit-scrollbar {
    	width: 3px;
   }
   
   /* 滚动条里面的滑块 */ 
   &::-webkit-scrollbar-thumb {
    	background-color: rgba(144, 147, 153, 0.3);
    	border-radius: 20px;
    	transition: background-color 0.3s;
  	}
}