css滚动

/* CSS 滚动示例代码 */

/* 1. 设置一个带有滚动条的 div */
.scrollable-div {
    width: 300px;
    height: 200px;
    overflow: auto; /* 当内容超出容器大小时显示滚动条 */
    border: 1px solid #ccc;
}

/* 2. 设置滚动条样式（适用于 Webkit 浏览器，如 Chrome 和 Safari） */
::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
}

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

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

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

/* 3. 使用滚动事件控制滚动行为（需要配合 JavaScript 使用） */
body {
    scroll-behavior: smooth; /* 平滑滚动效果 */
}

解释说明：

1. 设置带有滚动条的 div：通过设置 overflow: auto，当 div 内容超出其宽度或高度时，浏览器会自动显示滚动条。
2. 自定义滚动条样式：使用 ::-webkit-scrollbar 及相关伪元素可以自定义滚动条的外观。请注意，这些样式仅适用于基于 Webkit 的浏览器（如 Chrome 和 Safari）。
3. 平滑滚动：通过设置 scroll-behavior: smooth，可以让页面在滚动时产生平滑的效果，提升用户体验。

如果你需要进一步的解释或其他功能，请告诉我！