网页设计滚动条 第1篇
WebKit 提供了一系列前缀 -webkit-scrollbar 开头的属性来定制滚动条。这些属性包括：
例子：
在这个例子中，我们为 .container 元素的滚动条设置了自定义宽度、滑块颜色（包括鼠标悬停时的变色）和轨道背景色。
通过上述方法，您可以根据需要灵活地控制元素的滚动行为并自定义滚动条样式，从而提升网页的用户体验和视觉一致性。
网页设计滚动条 第2篇
首先需要介绍一下滚动条的组成部分。滚动条包含 track 和 thumb
track是滚动条的基础，其中的 thumb是用户拖动支页面或章节内的滚动
还有一件重要的事情要记住，滚动条可以水平或垂直地工作，这取决于设计。另外，在一个多语言网站上工作时，这一点也会发生变化，该网站在从左到右（LTR）和从右到左（RTL）两个方向上工作
网页设计滚动条 第3篇
滚动条的宽度
首先，我们需要定义滚动条的大小。这可以是垂直滚动条的宽度，也可以是水平滚动条的高度。
有了这一设置，我们就可以设置滚动条本身的样式。
滚动条 track
这代表了滚动条的基础。我们可以通过添加background、shadows、border-radius和border来对它进行造型。
滚动条 thumb
准备好了滚动条的基础后，我们就需要对滚动条的thumb进行样式设计。这很重要，因为用户可能会拖动这个thumb与滚动条进行交互。
至此，我们已经介绍了CSS中定制滚动条的老方法。让我们探索一下新的语法。
网页设计滚动条 第4篇
scrollbar-width 属性允许开发者在元素显示滚动条时设置滚动条的最大宽度。
语法:
取值:
将滚动条的宽度定义为数值宽度或者预定义宽度，当被定义为预定义宽度时，则必须为下列值之一：
备注： 用户代理必须将应用于根元素的任何 scrollbar-width 值应用于视口。
兼容性：
需要注意的是 各个浏览器 宽度不一样 设置这个 不能保证各个浏览器都一致！！！更多请参考：MDN scrollbar-width
实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。
scrollbar-color该CSS属性设置滚动条轨道和拇指的颜色
**track（轨道）**是指滚动条，其一般是固定的而不管滚动位置的背景。
thumb（拇指）是指滚动条通常漂浮在轨道的顶部上的移动部分。
语法：
取值：
定义滚动条的颜色。
值 描述auto 在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。dark 显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。light 显示一个轻量滚动条，可以是平台提供的滚动条的轻微变体，也可以是带有浅色的自定义滚动条。将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道。
兼容性：
非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式。
备注： 如果没有设置 overflow:scroll;，元素的滚动条将不会显示。
备注： ::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其他基于 WebKit 的浏览器）上可用。滚动条样式的标准方法可用于 scrollbar-color 和 scrollbar-width。
你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：
完整的伪类元素列表：