• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

CSS3 web前端中文站 1年前 (2018-08-14) 1044次浏览 已收录 0个评论

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

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

更多精彩内容请看 web 前端中文站
http://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 版本对滚动条支持的情况:

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

IE 浏览器滚动条支持情况

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

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

滚动条样式结构原理

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 随滚动条滚动效果 (固定版)》大家可以扩展学习下。


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS 修改浏览器滚动条样式 自定义修改方法 代码实例介绍
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址