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 选择器 基本选择器介绍
Jan 21 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
详解flex:1什么意思
Jul 23 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
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python 内置函数complex详解
2016/10/23 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
python列表推导式入门学习解析
2019/12/02 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
C#面试题问题集
2016/04/02 面试题
给同事的道歉信
2014/01/11 职场文书
服装设计师求职信
2014/06/04 职场文书
节约用水的口号
2014/06/20 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
满月酒邀请函
2015/01/30 职场文书
研究生个人学年总结
2015/02/14 职场文书
研讨会通知
2015/04/27 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers