css scroll

/* 示例代码：使用 CSS 实现滚动效果 */

/* 1. 滚动条样式 */
body::-webkit-scrollbar {
    width: 12px; /* 滚动条宽度 */
}

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

body::-webkit-scrollbar-thumb {
    background: #888; /* 滚动条滑块背景颜色 */
}

body::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滚动条滑块悬停时的背景颜色 */
}

/* 2. 元素内滚动 */
.container {
    width: 300px;
    height: 200px;
    overflow: auto; /* 当内容超出容器时显示滚动条 */
    border: 1px solid #ccc;
}

/* 3. 平滑滚动 */
html {
    scroll-behavior: smooth; /* 启用平滑滚动 */
}

解释说明：

1. 滚动条样式：通过 ::-webkit-scrollbar 及其相关伪元素，可以自定义浏览器滚动条的外观。这里设置了滚动条的宽度、轨道和滑块的颜色，并在滑块悬停时改变颜色。

2. 元素内滚动：.container 类定义了一个固定大小的容器，并使用 overflow: auto 来确保当内容超出容器时会显示滚动条。

3. 平滑滚动：通过设置 scroll-behavior: smooth，可以让页面或元素内的滚动变得平滑，而不是瞬间跳转。