如何修改滚动条的默认样式

在页面布局中，当内容超出方框时，为了美观，超出的部分会设置滚动条效果。有些浏览器默认的滚动条非常难看，那么你知道如何修改滚动条Bar样式吗？本文将教您如何设置滚动条的样式。

/*作为IT界最前沿的技术专家，我们对页面上每一个元素，甚至是滚动条的风格都要写实。下面给大家分享一下如何通过CSS控制滚动条的样式。代码如下： */ 1 /*定义滚动条轨迹*/
    #style-2::-webkit-滚动条-轨道
    {
        背景颜色：#F5F5F5；
        -webkit-box-shadow：插入 0 0 6px rgba(0, 0, 0, 0.22);
    }
    /*定义滚动条高度、宽度和背景*/
    #style-2::-webkit-滚动条
    {
        宽度：10px；
        背景颜色: rgba(0, 0, 0, 0.34);
    }
    /*定义滚动条*/
    #style-2::-webkit-滚动条-拇指
    {
        背景颜色：#8b8b8b；
        边框半径：10px；
    }

要实现单个div内内容的滚动，需要满足三个条件：

1。 div必须设置为固定高度，不能使用百分比或auto等弹性值。

2。内容的高度必须超过其自身的高度。

3。必须添加属性“overflow: auto”。

正文{ 滚动条箭头颜色：#f4ae21； /*三角箭头的颜色*/ 滚动条面颜色：#333； /*三维滚动条的颜色*/滚动条-3dlight-颜色：#666； /*三维滚动条亮边的颜色*/ 滚动条突出显示颜色：#666； /*滚动条空白部分的颜色*/ 滚动条阴影颜色：#999； /*三维滚动条阴影的颜色*/ 滚动条暗阴影颜色：#666； /*三维滚动条强阴影的颜色*/ 滚动条轨道颜色：#666； /*三维滚动条背景色*/ 滚动条基色：#f8f8f8； /*滚动条的基本颜色*/ 光标：url(mouse.cur); /*定制个性化鼠标*/ }