2.CSS3自定义滚动条样式

/* 设置滚动区域的宽度和高度 */
.scroll-area {
  width: 200px;
  height: 100px;
  overflow: auto;
}
 
/* 自定义滚动条样式 */
.scroll-area::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
}
 
.scroll-area::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的背景颜色 */
}
 
.scroll-area::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条实际可拖动部分的颜色 */
}
 
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬浮时滚动条的颜色 */
}

这段代码定义了一个.scroll-area类，它设置了滚动区域的宽度和高度，并且当内容超出区域时会显示滚动条。接着，使用::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb伪元素选择器来自定义滚动条的样式，使其具有宽度、轨道和滚动条颜色。在不同状态下（悬浮时），滚动条的颜色会有所不同，以改善用户体验。这段代码主要针对Webkit内核浏览器（如Chrome、Safari）。