全局/组件内——改变滚动条的默认样式

::-webkit-scrollbar {
  width: 10px; /*y轴上的滚动条宽度*/
  height: 10px;/*x轴上滚动条高度*/
}
::-webkit-scrollbar-track {
  border-radius: 3px; /*滚动条的背景区域的圆角*/
  background-color: #fdf8f5; /*滚动条的背景颜色*/
}
::-webkit-scrollbar-thumb {
  border-radius: 3px; /*滚动条的圆角*/
  background-color: #ccc; /*滚动条的背景颜色*/
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(46, 86, 159);
}
 
::-webkit-scrollbar-thumb:active {
  background-color: rgb(46, 86, 159);
  cursor: pointer;
}

不想要滚动条,那么宽高设置为0就好了:

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}

局部的样式修改(可以是div):

.div-class::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  /* 滚动条的滑块 */
 .div-class ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
发布了107 篇原创文章 · 获赞 23 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/qq_42092177/article/details/103921038