CSS 滚动

本节代码

在 CSS 中，滚动（scrolling）通常用于处理包含大量内容的元素，如文本框、列表、或容器，当内容溢出其可见区域时，可以通过滚动来查看隐藏部分。

滚动行为
滚动条

溢出处理 overflow

overflow - CSS：层叠样式表 | MDN

overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。
这个属性是以下 CSS 属性的简写：
- overflow-x
- overflow-y
指定一个或者两个关键字来作为 overflow 属性。如果指定两个关键字，第一个关键字用于 overflow-x，第二个关键字用于 overflow-y。否则，overflow-x 和 overflow-y 设置为相同的属性值。

属性值	描述
`visible`	默认值。内容不能被裁减并且可能渲染到边距盒（padding）的外部。
`hidden`	溢出的内容会被剪裁，不会呈现在元素框的外部。
`scroll`	会为溢出的内容创建滚动条，允许用户滚动查看溢出的内容。
`auto`	如果内容溢出，则会创建滚动条，否则不会。
`inherit`	继承父元素的 `overflow` 属性。
`initial`	设置为初始值。
`clip`	溢出的内容会被剪裁，不会呈现在元素框的外部，不会显示滚动条。

div {
  overflow: visible; /* 默认值，内容不剪切也不滚动 */
  overflow: hidden; /* 内容被修剪，超出部分隐藏 */
  overflow: scroll; /* 始终显示滚动条 */
  overflow: auto; /* 内容溢出时显示滚动条 */
}

滚动

滚动容器（Scrollable Container）：滚动通常是应用于具有固定高度（或宽度）并包含溢出内容的元素。可以通过设置元素的 overflow 属性来创建滚动容器。通常使用 overflow: auto; 或 overflow: scroll; 来启用滚动。
```
.scroll-container {
  width: 300px;
  height: 200px;
  overflow: auto; /* 或 overflow: scroll; */
}
```
滚动条（Scrollbars）：启用滚动时，浏览器通常会自动生成滚动条，以便用户可以滚动内容。滚动条包括水平滚动条和垂直滚动条（具体取决于内容是否溢出）。
滚动行为（Scroll Behavior）：可以使用 scroll-behavior 属性来定义滚动的行为，例如平滑滚动或立即跳转到目标位置。通常，设置为 scroll-behavior: smooth; 会启用平滑滚动效果。
```
.scroll-container {
  scroll-behavior: smooth;
}
```
滚动位置（Scroll Position）：可以使用 JavaScript 来控制滚动位置，以便滚动到特定元素或位置。
```
const element = document.getElementById("scroll-to-me");
element.scrollIntoView({behavior: "smooth"});
```

隐藏滚动条（Hiding Scrollbars）：隐藏默认的滚动条，以便自定义滚动样式。这可以通过将 ::-webkit-scrollbar 伪元素用于 WebKit（Chrome 和 Safari）浏览器，以及 scrollbar-width 和 scrollbar-color 属性用于一些浏览器来实现。

/* 隐藏 WebKit 浏览器的滚动条 */
.scroll-container::-webkit-scrollbar {
  display: none;
}

/* 自定义滚动条样式（仅适用于支持的浏览器） */
.scroll-container {
  scrollbar-width: thin; /* 或 auto */
  scrollbar-color: #999 #eee; /* 滚动条轨道颜色和滚动条滑块颜色 */
}

滚动行为

CSS 中的滚动行为 scroll-behavior 属性用于控制滚动时页面的过渡动效。

属性值	描述
`auto`	默认值。浏览器决定滚动行为，通常是立即跳转到目标位置。
`smooth`	启用平滑滚动行为，当滚动到目标位置时使用平滑的动画效果。

滚动条

实验性：这是一项实验性技术

在将其用于生产之前，请仔细检查浏览器兼容性表格。

CSS Scrollbars - CSS：层叠样式表 | MDN

CSS 中可以通过如下属性来控制和自定义网页的滚动条：

overflow: 生成滚动条，值可以是 auto、scroll。
scrollbar-width: 设置滚动条宽度，值为 thin、auto、none。
scrollbar-color: 设置滚动条颜色，接受颜色值。
-webkit-scrollbar: 控制 webkit 浏览器滚动条样式。

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green; /* 使用一个比较细的 滚动轨道为绿色，滚动块为紫色的滚动条 */
  scrollbar-width: thin;
}