详解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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
js实现随机点名
2021/01/19 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
shell的种类有哪些
2015/04/15 面试题
火锅店营销方案
2014/02/26 职场文书
新闻发布会主持词
2014/03/28 职场文书
网络妈妈观后感
2015/06/08 职场文书
教师网络培训心得体会
2016/01/09 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书