css设置滚动条样式，demo

CSS可以让你精细地定制滚动条的外观，让其与网站的整体风格保持一致。通过`.scrollbar`, `.horizontal-scrollbar`, 和`.vertical-scrollbar` 等选择器，你可以分别针对水平和垂直滚动条进行样式设置。下面是一个基本的示例：

/* 全局滚动条样式 */
.scrollbar {
  scrollbar-width: thin; /* 可选值有thin, medium, thick */
}

/* 水平滚动条样式 */
.scrollbar.horizontal {
  scrollbar-color: rgba(0, 0, 0, .5) white; /* 颜色方案，轨道颜色和滚动块颜色 */
  scrollbar-track: transparent;
}

/* 垂直滚动条样式 */
.scrollbar.vertical {
  scrollbar-color: rgba(0, 0, 0, .5) white;
  scrollbar-track: transparent;
}

/* 当鼠标悬停在滚动条上时的样式变化 */
.scrollbar:hover {
  scrollbar-color: rgba(0, 0, 0, .7) white;
}

/* 当滚动条处于活动状态（滚动时）时的样式变化 */
.scrollbar-active {
  scrollbar-color: rgba(0, 0, 0, .9) white;
}

在HTML中，滚动条默认由浏览器自动生成，除非设置了如上所示的样式，否则不会立即生效。如果想在某些特定元素上应用这些样式，可以在该元素的`style`属性或外部CSS文件中引用上述规则。