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 相关文章推荐
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 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
初学CAKEPHP 基础教程
2009/11/02 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
jupyter安装小结
2016/03/13 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python判断变量是否为列表的方法
2020/09/17 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
三好学生自我鉴定
2013/12/17 职场文书
安全检查验收制度
2014/01/12 职场文书
货车司机岗位职责
2014/03/18 职场文书
预备党员承诺书
2014/03/25 职场文书
英语系本科生求职信
2014/07/15 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
迟到检讨书
2015/01/26 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
奠基仪式致辞
2015/07/30 职场文书