CSS修改浏览器滚动条样式 自定义修改方法 代码实例介绍

今天我们介绍下关于如何通过CSS修改浏览器滚动条样式,贴出示例代码,大家可以继续往下学习。

这里的内容有一个概念:包括滑动块和滑动条导轨。很多公司的项目会用到这个效果。至少需要兼容各浏览器,熟知内核特点,实现修改设置滚动条样式。

更多精彩内容请看web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

滚动条组成

浏览器滚动条,其css样式由三部分组成:

1、::-webkit-scrollbar ? 定义滚动条整体样式;

2、::-webkit-scrollbar-thumb ?滑块;

3、::-webkit-scrollbar-thumb ?轨道;

代码体现

HTML代码部分:

<div class="innerWeb">
    <div class="innerboxHtml">
        <p style="height:150px;"></p>
        <p style="height:300px;"></p>
        <p>web前端中文站</p>
    </div>
</div>
CSS代码部分:

.innerWeb{
            width: 265px;
            height: 400px;
            position: absolute;
            top: 33px;
            left: 13px;
            /*cursor: pointer;*/
            overflow:hidden;
        }
        .innerboxHtml{
            overflow-x: hidden;
            overflow-y: auto;
            color: #000;
            font-size: .7rem;
            font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
            height: 100%;
        }
        /*滚动条样式*/
        .innerboxHtml::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .innerboxHtml::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        .innerboxHtml::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }

IE浏览器的滚动条

对滚动条的定义,最早可追溯到IE5.5,下图就是整理出来的各IE版本对滚动条支持的情况:

IE浏览器滚动条支持情况

为了让大家对滚动条的实现原理及结构有更一步认识,从而使自定义设置滚动条样式的操作更加熟练,给大家用图讲解下:

滚动条样式结构原理

webkit内核的浏览器滚动条

对于webkit内核的浏览器,最常见就是360浏览器,其他可见“八大webkit内核的浏览器”。

其元素组成如下:

CSS代码:
    ::-webkit-scrollbar              
    ::-webkit-scrollbar-button      
    ::-webkit-scrollbar-track     
    ::-webkit-scrollbar-track-piece  
    ::-webkit-scrollbar-thumb       
    ::-webkit-scrollbar-corner      
    ::-webkit-resizer               

FireFox浏览器滚动条

对于FireFox浏览器滚动条,目前还没有什么有效方法设置滚动条样式。大家有方法可以评论分享交流下。

至此,给大家介绍的CSS自定义修改浏览器滚动条样式的方法差不多结束了。大家可以收藏本网站,在项目,练习或者查阅的时候可以复习下,温故而知新。扩展:有一些是jQuery的滚动条效果,见《JQUERY 随滚动条滚动效果 (固定版)》大家可以扩展学习下。

3
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到