CSS3改变浏览器滚动条样式


Posted in HTML / CSS onJanuary 04, 2019

注:该方法只适用于 -webkit- 内核浏览器

浏览器滚动条太宽,太丑,影响日常开发怎么办,改TA

滚动条外观由2部分组成:1.滚动条整体滑轨 2.滚动条滑轨内滑块

在CSS中滚动条由3部分组成

name::-webkit-scrollbar //滚动条整体样式

name::-webkit-scrollbar-track //滚动条滑轨

name::-webkit-scrollbar-thumb //滚动条内部滑块

注:以上3个均为伪类,请将name更改为需要改变的元素名称

例如:改变整体页面的滚动条样式

body::-webkit-scrollbar{ //先改变body的滚动条宽度

width: 8px;

}

body::-webkit-scrollbar-track{//再改变body的滚动条轨道颜色

background: rgb(200, 200, 200);

border-radius: 5px;

}

body::-webkit-scrollbar-thumb{//最后改变body的滚动条滑轨相关的样式

background: rgb(120, 120, 120);

border-radius: 5px;

}

◆ 右侧为上部代码更改后的滚动条样式

◆ 可在样式中添加背景、透明度,边框,圆角等属性,使浏览器更美观

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

HTML / CSS 相关文章推荐
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 #HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 #HTML / CSS
10分钟入门CSS3 Animation
Dec 25 #HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 #HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 #HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 #HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 #HTML / CSS
You might like
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php中Ctype函数用法详解
2014/12/09 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
详解JS模块导入导出
2017/12/20 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
基于python实现百度翻译功能
2019/05/09 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
租房协议书范例
2014/10/14 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
导游词之昭君岛
2020/01/17 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python