css美化特定部分的滚动条效果

如果你想做一个精致的网页，浏览器滚动条的效果一定会影响你的网页效果， 那么浏览器滚动条的样式可以修改么?得的这个滚动条的样式确实可以修改，但是它只支持比较新的浏览器。 我们可以通过CSS样式修改滚动条的颜色、宽度、形状等样式属性，使其更符合页面设计风格。

修改滚动条样式用到的CSS伪类

• ::-webkit-scrollbar — 整个滚动条

• ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)

• ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块

• ::-webkit-scrollbar-track — 滚动条轨道

• ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分

• ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分

• ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

主要css代码与解析

<style>
    /* 设置滚动条的宽度和颜色 */
    .jqfree::-webkit-scrollbar
    {
        /* 滚动条宽度 */
        width: 10px;
    }
    /* 设置滚动条轨道的颜色 */
    .jqfree::-webkit-scrollbar-track
    {
        background: #b6d679;
    }
    /* 设置滚动条滑块的颜色 */
    .jqfree::-webkit-scrollbar-thumb
    {
        background: #64854c;
        border-radius: 5px;
        border-left: 2px solid #b6d679;
        border-right: 2px solid #b6d679;
    }
</style>

如果要修改整个页面的滚动条效果呢？代码如下

<style>
    html::-webkit-scrollbar
    {
        width: 6px;
    }
    
    html::-webkit-scrollbar-track
    {
        background-color: #fff;
    }
    
    html::-webkit-scrollbar-thumb
    {
        height: 300px;
        border-radius: 6px;
        background-color: #cdcdcd;
    }
    
    html::-webkit-scrollbar-thumb:hover
    {
        background-color: #cdcdcd;
    }
    
    html::-webkit-scrollbar-thumb:active
    {
        background-color: #666363;
    }
    
    html::-webkit-scrollbar-corner
    {
        background-color: #535353;
    }
    
    html::-webkit-scrollbar-resizer
    {
        background-color: #ff6e00;
    }
</style>

兼容性问题

滚动条美化仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用。其实一看到 -webkit- 前缀就能明白它是 CSS3 中的 私有属性前缀 ，特定前缀是为了适配特定浏览器内核的。