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实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 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/11/11 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
python中循环语句while用法实例
2015/05/16 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
wxPython实现整点报时
2019/11/18 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
新郎父亲婚宴答谢词
2014/01/11 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
国旗下的演讲稿
2014/05/08 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
公民授权委托书
2014/10/15 职场文书
综合测评自我评价
2015/03/06 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
Nginx利用Logrotate实现日志分割
2022/05/20 Servers