滚动条全局样式修改与局部修改

最新推荐文章于 2024-12-04 17:41:02 发布

转载最新推荐文章于 2024-12-04 17:41:02 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_30819163/article/details/101431652

本文详细介绍如何使用CSS定制滚动条的全局及局部样式，包括滚动条的宽度、高度、背景颜色和圆角等属性的设置。同时，也介绍了如何通过设置宽高为0来隐藏滚动条。

滚动条全局样式修改与局部修改

全局的样式代码：

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  /* 滚动条的滑块 */
  ::-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;
  }

假如不想要滚动条，那么宽高设置为0就好了：

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

扩展下其他的：

滚动条全局样式：
// 滚动条设置

::-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;
}