CSS改变浏览器默认滚动条样式
前言
最近总是看到某网站滚动条不是浏览器默认样式，而是自定义样式
比如我博客的滚动条，自定义滚动条样式和hover前后的效果
顿时来了兴致和有一个疑问，这是怎么实现的呢？
解决
注：①：经测试，目前只支持webkit内核的浏览器，
比如，谷歌，Safari，edge，360安全和360极速浏览器的极速模式，火狐，IE，opera等不支持
②：如上设置后浏览器默认的滚动条样式都会被修改，若不想样式作用于整个浏览器，
比如只想改变一个弹窗中超出内容后滚动条的样式可以在前面加上类 .element::-webkit-scrollbar
③：-webkit-scrollbar属性设置的滚动条宽为纵向滚动条的宽度，横向滚动条的高度
Demo
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
::-webkit-scrollbar {
/*改变纵向滚动条宽度*/
width: 15px;
}
::-webkit-scrollbar-track {
/*改变滚动条轨道颜色*/
border-radius: 10px;
background-color: #F0F0F0;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
/*改变滚动条滑轨相关的样式*/
border-radius: 10px;
background-color: #ccc;
}
/* 移入鼠标效果 */
::-webkit-scrollbar-thumb:hover {
border-radius: 10px;
background-color: #A3A3A3;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
div {
font-size: 600px
}
</style>
</head>
<body>
<div class="test1">666</div>
<div class="test2">888</div>
<div class="test3">999</div>
<div class="container">
<div class="test4">000</div>
</div>
</body>
</html>
参考原文：https://blog.csdn.net/qq_36763293/article/details/82779922
CSS改变浏览器默认滚动条样式的更多相关文章
- css改变谷歌浏览器的滚动条样式
详细内容请点击 /*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{ height:50px; outline-offset:-2px; ...
- css实现修改默认滚动条样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...
- css清除浏览器默认样式
css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...
- CSS系列——浏览器默认样式
了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- 设置cnblogs默认滚动条样式
默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...
- css修改浏览器默认的滚动条样式
//滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...
- css 改变浏览器滚动条的样式
/*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...
- css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...
随机推荐
- mysql常用命令杂记
查看版本 mysqladmin -uRootmaster -pRootmaster@777 versionselect version() 查看Log_bin是否开启 show variables l ...
- The method newInstance() from the type Class is deprecated since version 9
newInstance()在 java9中已被弃用 JAVA9之前用法 Class.forName("类的全限定名").newInstance(); JAVA9之后用法 Class ...
- Android框架Volley使用：Get请求实现
首先我们在项目中导入这个框架: implementation 'com.mcxiaoke.volley:library:1.0.19' 在AndroidManifest文件当中添加网络权限: < ...
- /cygdrive/c/MinGW/bin/autoconf-2.68: line 501: /mingw/bin/autom4te-2.68: No such file or directory
出现如下错误 编译openssh的时候 # autoconf /cygdrive/c/MinGW/bin/autoconf-2.68: line 501: /mingw/bin/autom4te-2. ...
- java：数据结构（四）二叉查找树以及树的三种遍历
@TOC 二叉树模型 二叉树是树的一种应用,一个节点可以有两个孩子:左孩子,右孩子,并且除了根节点以外每个节点都有一个父节点.当然这种简单的二叉树不能解决让树保持平衡状态,例如你一直往树的左边添加元素 ...
- go构建脚本ansible分发时出现的问题总结“non-zero return code”
背景介绍: 在Jenkins服务器配置go项目发布脚本,编译完成后,使用ansible分发到部署服务器上,然后将启动项目脚本start_coachcore.sh发布到目标服务器上,执行启动,目标服务器 ...
- Centos7下安装配置keepalived
这里用的是两台设备做高可用 master服务器ip地址:192.168.12.78 slave服务器ip地址:192.168.12.79 虚拟ip(VIP,一个尚未占用的内网ip即可)地址:192.1 ...
- 03-flex-wrap是否换行
flex-wrap:运用到父元素上 结合 display: flex; flex-wrap: wrap; 换行 flex-wrap: nowrap; 不换行 #main { width: 300px ...
- C++ class 中的 const 成员函数
const 修饰的成员函数 表示 不会修改class中的成员变量. const 和 非-const 的成员函数同事存在时, 用户定义 const 类对象,调用 const 成员函数: 定义 非-c ...
- UVA10559 方块消除 Blocks（区间dp）
一道区间dp好题,在GZY的ppt里,同时在洛谷题解里看见了Itst orz. 题目大意 有n个带有颜色的方块,没消除一段长度为 \(x\) 的连续的相同颜色的方块可以得到 \(x^2\) 的分数,用 ...