[分享]css不占用空间的滚动条

CSS中的滚动条并不会占用页面中的空间，这是因为滚动条是属于浏览器自身的元素，并非HTML文档中的元素。我们可以通过 CSS 来控制滚动条的样式、大小、颜色等信息，从而达到美化页面的效果。/ 控制滚动...

CSS中的滚动条并不会占用页面中的空间，这是因为滚动条是属于浏览器自身的元素，并非HTML文档中的元素。我们可以通过 CSS 来控制滚动条的样式、大小、颜色等信息，从而达到美化页面的效果。

/* 控制滚动条宽度和颜色 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #f5f5f5;
}

/* 控制滚动条滑块个样式 */
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 10px;
}

/* 控制滚动条滑动时出现的背景颜色 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 10px;
} 

在上述代码中，我们使用了伪元素 ::-webkit-scrollbar 来控制滚动条的宽度、高度以及背景颜色。同时，我们还使用了伪元素 ::-webkit-scrollbar-thumb 来控制滚动条滑块的颜色和大小，以及 ::-webkit-scrollbar-track 来控制滚动条滑动时出现的背景颜色。

需要注意的是，上述代码只适用于 Webkit 内核的浏览器，如果你使用的是 Firefox 或 Edge 等非 Webkit 内核的浏览器，则需要使用相应的前缀来兼容不同的浏览器。