css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

请看下面的详细讲解。

CSS设置滚动条颜色与样式

设置滚动条颜色

要设置滚动条的颜色，我们需要使用伪元素::-webkit-scrollbar，再用background-color属性设置滚动条的背景颜色，用thumb伪元素来设置滚动条的滑块颜色。

/* 设置滚动条的背景颜色 */
::-webkit-scrollbar {
  background-color: #f5f5f5;
}

/* 设置滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #000000;
}

设置滚动条样式

要设置滚动条的样式，我们可以使用::-webkit-scrollbar-track、::-webkit-scrollbar-thumb和::-webkit-scrollbar-thumb:hover这三个伪元素来定义。

::-webkit-scrollbar-track用来设置滚动条的轨道，可以添加background-color属性来设置颜色。

::-webkit-scrollbar-thumb用来设置滚动条的滑块，我们可以添加background-color、border-width、border-radius等属性来定义样式。

::-webkit-scrollbar-thumb:hover则用来设置鼠标在滚动条滑块上的样式。

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #000000;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555555;
}

如何去掉与隐藏滚动条

去掉滚动条

有时候我们不想显示滚动条，此时可以使用::-webkit-scrollbar伪元素和display:none属性来去掉滚动条。

/* 去掉滚动条 */
::-webkit-scrollbar {
  display: none;
}

隐藏滚动条

如果想要滚动条在内容超出容器的时候出现，但初始并不显示，可以使用::-webkit-scrollbar和width:0;height:0;background:transparent属性来隐藏滚动条自身的元素，但保留滚动功能。

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

以上就是关于CSS设置滚动条颜色与样式以及如何去掉与隐藏滚动条的完整攻略，希望能够帮助到你。