css3 实现滚动条美化效果的实例代码


Posted in HTML / CSS onJanuary 06, 2021

具体代码如下所示:

/*滚动条的宽度*/

    ::-webkit-scrollbar {
        width:9px;
        height:9px;
    }

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

    ::-webkit-scrollbar-track {
        width: 6px;
        background-color:#0d1b20;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }

/*滚动条的设置*/

    ::-webkit-scrollbar-thumb {
        background-color:#606d71;
        background-clip:padding-box;
        min-height:28px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
/*滚动条移上去的背景*/

    ::-webkit-scrollbar-thumb:hover {
         background-color:#fff;
    }

CSS

::-webkit-scrollbar {  }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb {  }
::-webkit-scrollbar-corner { }
::-webkit-resizer {  }

以上CSS代码所管辖的区域对就关系:以上代码解释

::-webkit-scrollbar 滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

到此这篇关于css3 实现滚动条美化效果的实例代码的文章就介绍到这了,更多相关css3 滚动条美化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
box-shadow单边阴影的实现
May 21 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 #HTML / CSS
使用CSS3制作版头动画效果
Dec 24 #HTML / CSS
CSS3实现红包抖动效果
Dec 23 #HTML / CSS
html5+css3之制作header实例与更新
Dec 21 #HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 #HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 #HTML / CSS
html+css3实现的登录界面
Dec 09 #HTML / CSS
You might like
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
jQuery each()小议
2010/03/18 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python深度优先算法生成迷宫
2018/01/22 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
英文导游词
2015/02/13 职场文书
大学生实习推荐信
2015/03/27 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python