在CSS 中，如果我们在块级容器上设置了属性:
overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /只是x方向/
或者
overflow-y:scroll /只是y方向/
当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。
属性介绍：
1. ::-webkit-scrollbar //滚动条整体部分
2. ::-webkit-scrollbar-button //滚动条两端的按钮
3. :: -webkit-scrollbar-track //外层轨道
4. ::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）
5. ::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
6. ::-webkit-scrollbar-corner //边角
7. ::-webkit-scrollbar-resizer //定义右下角拖动块的样式
/定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸/
::-webkit-scrollbar
{
width:16px;
height:16px;
background-color:#F5F5F5;
}
/定义滚动条轨道内阴影+圆角/
::-webkit-scrollbar-track
{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
border-radius:10px;
background-color:#F5F5F5;
}
/定义滑块内阴影+圆角/
::-webkit-scrollbar-thumb
{
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background-color:#555;
}
滚动条伪类选择器
要创建更加自定义的设计，我们可以针对滚动条的特定元素，并通过向每个伪元素添加伪类。以下是一些最常见的伪类：
:horizontal：用于设置与垂直滚动条不同的水平滚动条样式。例如，您可以为水平滚动条设置不同的宽度或颜色
:vertical：用于设置垂直滚动条与水平滚动条不同的样式
:decrement：适用于滚动条开头的箭头按钮。它用于设置递减按钮或垂直滚动条的向上箭头和水平滚动条的向左箭头的样式
:increment：适用于滚动条末端的箭头按钮。它用于设置增量按钮或垂直滚动条的向下箭头和水平滚动条的向右箭头的样式
:start：适用于滚动条的第一个按钮和第一个轨道部分，分别位于垂直或水平滚动条的顶部或左侧
:end：适用于滚动条的最后一个轨道，分别位于垂直或水平滚动条的底部或右侧
鼠标不悬浮设置背景色和background-clip: padding-box，边框颜色改成透明；悬停时改变背景色，就完成了鼠标悬停改变滚动条样式（高度、宽度、颜色）
::-webkit-scrollbar{
height: 9px !important;
width: 9px !important;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
border-style: dashed;
background-color: rgba(157, 165, 183, 0.4);
border-color: transparent;
border-width: 1.5px;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(157, 165, 183, 0.7)
}
网友评论