CSS怎么设置滚动条样式

这篇文章主要讲解了“CSS怎么设置滚动条样式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么设置滚动条样式”吧！

　　滚动条设置Html代码

　　<styletype="text/css">

　　/*ie滚动条样式*/

　　*{

　　scrollbar-arrow-color:rgb(200,200,200);/*ok-上下三角箭头*/

　　scrollbar-3dlight-color:rgb(200,200,200);/*ok-3d滑块左上角高光部分颜色*/

　　scrollbar-highlight-color:rgb(200,200,200);/*ok-滑块左上角高光部分颜色*/

　　scrollbar-shadow-color:rgb(200,200,200);/*ok*/

　　scrollbar-darkshadow-color:rgb(200,200,200);/*ok-以上都是定义一些阴影高光等3D效果*/

　　scrollbar-face-color:rgb(200,200,200);/*ok-滑块*/

　　scrollbar-track-color:rgb(240,240,240);/*ok-滑道*/

　　}

　　/*chrome滚动条样式*/

　　::-webkit-scrollbar{/*滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。*/

　　width:10px;

　　height:10px;

　　}

　　::-webkit-scrollbar-button{/*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

　　display:none;

　　}

　　::-webkit-scrollbar-track{/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

　　display:none;

　　滚动条设置组成部分

　　1.::-webkit-scrollbar滚动条整体部分

　　2.::-webkit-scrollbar-thumb滚动条里面的小方块，能向上向下移动（或向左向右移动）

　　3.::-webkit-scrollbar-track滚动条的轨道（里面装有Thumb）

感谢各位的阅读，以上就是“CSS怎么设置滚动条样式”的内容了，经过本文的学习后，相信大家对CSS怎么设置滚动条样式这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！