css不占空间的滚动条

CSS不占空间滚动条，顾名思义就是不会占用页面布局空间的滚动条， 这种滚动条特别适合在需要占用尽可能少的页面布局空间的情况下使用。

/* 首先，我们需要使用如下代码来定义一个样式类，以控制滚动条的外观样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;  /* 定义滚动条宽度 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #333;  /* 定义滚动条的滑块颜色 */
  border-radius: 10px;  /* 定义滑块的圆角 */
}

/* 接下来，我们需要应用这个样式类来实现不占用页面布局空间的滚动条 */
.container {
  overflow-y: scroll;  /* 定义容器元素垂直方向可滚动 */
  scrollbar-color: #333 transparent; /* 定义滚动条颜色和滑块透明度 */
  scrollbar-width: thin;  /* 定义滚动条宽度 */
}

.container::-webkit-scrollbar {
  height: 0;  /* 隐藏滚动条高度 */
  width: 0;
}

.container::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 10px;
  border: none;  /* 隐藏滑块边框 */
} 

使用这种方法创建的滚动条，不仅能够优美的融入页面布局，而且还能够提供用户友好性的滚动体验，提升网站的用户体验。