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仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 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递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php简单判断文本编码的方法
2015/07/30 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
JS中的多态实例详解
2017/10/15 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
python executemany的使用及注意事项
2017/03/13 Python
Python中字典和集合学习小结
2017/07/07 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
致全体运动员广播稿
2014/02/01 职场文书
法学函授自我鉴定
2014/02/06 职场文书
服务标语大全
2014/06/18 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
安全生产先进个人总结
2015/02/15 职场文书
生日寿星公答谢词
2015/09/29 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书