在前两篇文章中，我们介绍了CSS设置div滚动条样式的示例，以及CSS3自定义滚动条样式的示例。 所有人都知道当内容超过容器时，容器上会显示滚动条，但如何使用CSS控制滚动条的样式呢？ 今天向大家详细介绍！
示例：/*作为it行业的领先技术大师，您必须比较页面上所有元素的样式。 即使是滚动条也不忽视。
让我给你看看如何用CSS控制滚动条的样式。 代码如下。 */
/*定义滚动条的轨道*
# style-2:3360-WebKit-scroll bar-track
{
背景色： # f5f5f 5；
– WebKit-box-shadow : inset 006 px rgba (0，0，0.22 )；
}
/*定义滚动条dzddx和背景*
# style-2:3360-WebKit-scroll bar
{
width: 10px；
背景色： rgba (0，0，0，0.34 )；
}
/*滚动条定义*
# style-2:3360-WebKit-scroll bar-thumb
{
背景色： # 8b 8b 8b；
border-radius: 10px；
}
*要滚动一个p中的内容，必须满足以下三个条件：
1、p必须设定一定的高度，不能使用百分比或自动等弹性值。
2、其中内容的高度必须超过自身的高度。
3、必须添加属性“overflow:auto”。
*隐藏滚动条：
1、消除水平滚动条：
2、消除垂直滚动条：
3、隐藏横向，显示纵向滚动条：
4、隐藏所有滚动条：
或者，也可以通过将滚动条的颜色设置为完全透明来同时实现内容滚动和滚动条的隐藏。
: APP应用程序
没有水平滚动条：
测试
没有垂直滚动条
测试
没有滚动条
测试
自动显示滚动条
测试
自己定义滚动条的颜色。 代码如下。 Body {
scroll bar-arrow-color : # f4ae 21； //三角箭头颜色/
scrollbar-face-color: #333； /*立体滚动条的颜色*
scroll bar-3d灯光颜色： # 666； /*立体滚动条明亮边的颜色*
scroll bar-highlight-color : # 666； /*滚动条空白部分的颜色*
scroll bar-shadow-color : # 999； /*立体滚动条阴影颜色*
scroll bar-dark shadow-color : # 666； /*立体滚动条的强阴影颜色*
scrollbar-track-color: #666； /*立体滚动条的背景颜色*
scroll bar-base-color : # f8f8 F8； /*滚动条的基本颜色*
cursor:URL(mouse.cur； /*自定义个性化鼠标*
}
上述两种适用和
、
附件：
说明与以下overflow属性具有不同的价值：
板载：可视； 不剪切内容，也不添加滚动条。 默认值。 使用此值时，无论” width “和” height “中设置的值如何，其内容都将被强制显示，即使它们不在范围内。
溢出：自动； 根据需要剪切内容并添加滚动条。
溢出：隐藏； 不会显示超过对象高度的内容。
溢出：滚动； 始终显示垂直滚动条。
溢出水平和垂直内容时的设置
overflow-x水平内容溢出时的设定
溢出- y垂直内容溢出时的设定
上述特性的值为可见、滚动、隐藏和自动
隐藏效果与可见性相反。 任何超过“width”和“height”的东西都将不再可见。
无论内容是否超出范围，scroll都会显示滚动条。
总结：
希望通过本文的学习，伙伴们能够控制css滚动条的风格，获得更多的理解和认识，对你的工作有所帮助！
相关建议：