[分享]css两个滚动条

CSS滚动条是用来帮助用户在一个较长的文本内容或者图片列表中浏览内容的工具。在CSS中，有两种方式生成滚动条：使用overflow属性和使用伪元素。/ 使用overflow属性生成滚动条 / .scr...

CSS滚动条是用来帮助用户在一个较长的文本内容或者图片列表中浏览内容的工具。在CSS中，有两种方式生成滚动条：使用overflow属性和使用伪元素。

/* 使用overflow属性生成滚动条 */
.scroll-box {
  overflow: auto;
  height: 200px;
}

/* 使用伪元素生成滚动条 */
.scrollbox {
  position: relative;
  height: 200px;
}

.scrollbox:before {
  content: ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  background: #ccc;
}

.scrollbox::-webkit-scrollbar-thumb {
  background: #999;
}

.scrollbox::-webkit-scrollbar {
  width: 10px;
  background: #ccc;
} 

通过使用overflow属性在容器上设置为auto，当内容超过容器高度时，会自动生成一个垂直滚动条。同时，也可以使用overflow-x和overflow-y来分别控制水平和垂直方向的滚动条。

而使用伪元素生成滚动条需要利用webkit内核浏览器的特性。首先，在容器上设置position为relative，然后在伪元素:before上设置position为absolute，并且将其定位到容器的右上角。设置好宽度和背景色后，就可以生成一个垂直滚动条。

接着，利用::-webkit-scrollbar伪类选择器可以控制滚动条的样式，例如可以设置滚动条宽度、背景色等。而::-webkit-scrollbar-thumb伪元素可以用来控制滚动条拖动条的样式。需要注意的是，如果要在不同浏览器中获得相同的效果，还需要加上其他浏览器的前缀。

两种方式各有优缺点，使用overflow属性生成的滚动条较为简单，但样式相对较难控制。而使用伪元素生成滚动条则需要额外CSS样式的支持，但样式更加灵活自由。选用哪种方式还需根据实际需求和开发习惯选择。