SOURCE

<div class="scrollbar-container">
	<div class="content"></div>
</div>
<p>直接改变</p>
<div class="scrollbar-container2">
	<div class="content"></div>
</div>

   .scrollbar-container {
       width: 300px;
       height: 200px;
       overflow: auto;
       border: 1px solid #ccc;
   }
   
   .content {
       width: 500px;
       height: 1000px;
   }
   /* 设置横向和竖向滚动条宽高 */
   
   ::-webkit-scrollbar {
       height: 12px !important;
       width: 12px !important;
   }
   /* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
   
   ::-webkit-scrollbar-corner {
       background-color: transparent;
   }
   
   ::-webkit-scrollbar-thumb {
       border-radius: 5px;
       border-style: dashed;
       background-color: rgba(157, 165, 183, 0.4);
       border-color: transparent;
       /* 边框的宽度 */
       border-width: 2px;
       /* background-clip属性指定背景绘制区域 背景绘制在衬距方框内（padding-box） */
       background-clip: padding-box;
   }
   
   ::-webkit-scrollbar-thumb:hover {
       background: rgba(157, 165, 183, 0.7)
   }
   

   /* 直接hover改变宽度 但是鼠标移入整个模块也会改变 */
   .scrollbar-container2 {
       width: 300px;
       height: 200px;
       overflow: auto;
       border: 1px solid #ccc;
   }
   
   .scrollbar-container2::-webkit-scrollbar {
       width: 8px;
       /* 滚动条宽度 */
       height: 8px;
   }
   
   .scrollbar-container2:hover::-webkit-scrollbar {
       width: 14px;
       /* 滚动条宽度 */
       height: 14px;
   }
   
   .scrollbar-container2::-webkit-scrollbar-thumb {
       cursor: pointer;
       background-color: #ccc;
       /* 滚动条滑块颜色 */
       border-radius: 6px;
       /* 滑块圆角 */
       transition: background-color 0.3s, border-radius 0.3s;
       /* 过渡动画 */
   }
   
   .scrollbar-container2:hover::-webkit-scrollbar-thumb {
       background-color: red;
       /* 鼠标移入时滑块颜色 */
       border-radius: 50px;
       /* 鼠标移入时滑块圆角变大 */
   }