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 ...
随机推荐
- Jmeter之用于json格式的响应断言
当响应结果是json格式时,用JSON Assertion更方便判断. 1 在请求上右键添加json断言 2 编辑json Assertion 判断方式: 如果响应结果不是json格式的,fail ...
- Octave Convolution详解
前言 Octave Convolution来自于这篇论文<Drop an Octave: Reducing Spatial Redundancy in Convolutional Neural ...
- Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失问题分析
最近spring boot项目中由于使用了spring cloud 的hystrix 导致了threadLocal中数据丢失,其实具体也没有使用hystrix,但是显示的把他打开了,导致了此问题. 导 ...
- Web前端基础(6):CSS(三)
1. 定位 定位有三种:相对定位.绝对定位.固定定位 1.1 相对定位 现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别. 2.设置相对定位之后,我们才可以使用四个方向的 ...
- Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析
Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析 说明:Java生鲜电商平台中,由于服务进行了拆分,很多的业务服务导致了请求的网络延迟与性能消耗,对应的这些问题,我们 ...
- Python【day 15-3】函数部分
'''''' ''' 一.函数 1.函数定义 对功能或者动作的封装 在类中定义,就是方法 在类之外定义,就是函数 2.函数写法 1.定义或者申明函数 def 函数名(形参列表): 函数体(return ...
- crm-4权限
1.rbac-优化login函数 因为login是业务逻辑 ,而rbac是个组件 ,将rbac在login的代码分离 ###初始化权限函数分离出去 rbac/service/permission fr ...
- HTML常用标签一
html文本格式化标签 在网页中,有时需要为文字设置粗体 .斜体 或下划线 效果,这是就需要用到HTML中的文本格式标签,是文字以特殊的方式显示 标签语义:突出重要性,比普通文字更重要 语义 标签 说 ...
- vueInitVux中引入bootstrap、jquery步骤
1.先从github上下载 vueInitVux 2.将 build下webpack.base.conf.js 文件 替换成 Html5IQ下的文件 3.npm i 4.npm i jquery -- ...
- js获取手机唯一标识码
Device模块管理设备信息,用于获取手机设备的相关信息,如IMEI.IMSI.型号.厂商等.通过plus.device获取设备信息管理对象. imei: 设备的国际移动设备身份码 imsi: 设备的 ...