css div 滚动条

/* 设置 div 的滚动条样式 */
div {
  width: 300px;
  height: 200px;
  overflow: auto; /* 当内容超出容器时显示滚动条 */
  background-color: #f1f1f1;
}

/* 滚动条整体部分 */
div::-webkit-scrollbar {
  width: 12px; /* 滚动条的宽度 */
}

/* 滚动条的轨道部分 */
div::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景颜色 */
}

/* 滚动条的滑块部分 */
div::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 6px; /* 滑块圆角 */
}

/* 鼠标悬停时滑块的颜色 */
div::-webkit-scrollbar-thumb:hover {
  background: #555;
}

解释说明：

• overflow: auto;：当 div 内容超出其宽度或高度时，会自动显示滚动条。
• ::-webkit-scrollbar：用于自定义滚动条的整体样式，包括宽度等。
• ::-webkit-scrollbar-track：定义滚动条的轨道部分样式。
• ::-webkit-scrollbar-thumb：定义滚动条的滑块部分样式。
• border-radius：使滑块的边角变得圆润。
• :hover：当鼠标悬停在滑块上时，改变滑块的颜色。

这个代码适用于基于 WebKit 的浏览器（如 Chrome 和 Safari）。对于其他浏览器，可能需要使用不同的前缀或方法来实现类似的效果。