详解css3自定义滚动条样式写法


Posted in HTML / CSS onDecember 25, 2017

本文介绍了css3自定义滚动条样式写法,分享给大家,具体如下:

先简单介绍一下各个属性

::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。

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

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

::-webkit-scrollbar-track-piece :内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。

::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分

::-webkit-scrollbar-corner :边角,两个滚动条交汇处

::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)

详解css3自定义滚动条样式写法

下面看几组比较

 效果一

详解css3自定义滚动条样式写法

上图滚动条效果的css代码如下,默认此部分为原始代码,之后的效果图修改都是在此基础上修改

 

/*css主要部分的样式*/
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/

        ::-webkit-scrollbar {
            width: 10px; /*对垂直流动条有效*/
            height: 10px; /*对水平流动条有效*/
        }

        /*定义滚动条的轨道颜色、内阴影及圆角*/
        ::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: rosybrown;
            border-radius: 3px;
        }


       /*定义滑块颜色、内阴影及圆角*/
        ::-webkit-scrollbar-thumb{
            border-radius: 7px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #E8E8E8;
        }

        /*定义两端按钮的样式*/
        ::-webkit-scrollbar-button {
            background-color:cyan;
        }

        /*定义右下角汇合处的样式*/
       ::-webkit-scrollbar-corner {
            background:khaki;
        }

效果二

在上面原始代码上加如下代码

::-webkit-scrollbar-track-piece {
            background-color: darkred;

        }

详解css3自定义滚动条样式写法

可看出覆盖了之前::-webkit-scrollbar-track属性的样式

效果三

在上面原始代码上加如下代码

::-webkit-scrollbar-track-piece {
            background-color: darkred;
            background-image:url(https://www.baidu.com/img/baidu_jgylogo3.gif);

        }

详解css3自定义滚动条样式写法

现在是不是能理解上面说的内层轨道和外层轨道之分了

效果四

将原始代码的::-webkit-scrollbar-track属性改为

::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-image:url(https://www.baidu.com/img/baidu_jgylogo3.gif);
            background-color: rosybrown;
            border-radius: 3px;
        }

详解css3自定义滚动条样式写法

大家仔细观察上面的几种情况,得出结论。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3教程之倾斜页面
Jan 27 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 #HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 #HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 #HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 #HTML / CSS
纯CSS3实现3D旋转书本效果
Mar 21 #HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 #HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 #HTML / CSS
You might like
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
JS查看对象功能代码
2008/04/25 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python动态加载变量示例分享
2014/02/17 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python实现三次样条插值
2018/12/17 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python计算信息熵实例
2020/06/18 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
金融行业职业生涯规划范文
2014/01/17 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
工程资料员岗位职责
2015/04/13 职场文书