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 ...
随机推荐
- Java开发桌面程序学习（八）——启动浏览器或者打开资源管理器操作与hyperlink超链接的使用
启动浏览器或者打开资源管理器 启动浏览器 java1.6版本以上,Desktop Desktop.getDesktop().browse(new URI("www.cnblogs.com/k ...
- Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之五 || Swagger的使用 3.3 JWT权限验证【必看】
本文梯子 本文3.0版本文章 前言 1.如何给接口实现权限验证? 零.生成 Token 令牌 一.JWT ——自定义中间件 0.Swagger中开启JWT服务 1:API接口授权策略 2.自定义认证之 ...
- 猪肉涨价飞快？让我们用python来预测一下今年最后一个月的猪肉价格吧！
今天我们将使用Facebook的“先知”模型来预测2019年12月广东省的猪肉价格,本实验仅供参考. 1.准备数据 在猪价系统网站上利用开发者工具获得过去一年广东省的猪肉价格保存为json格式:htt ...
- Vue-router中的history模式和hash模式
还记得在我们从零开始搭建一个Vue-cli3.0项目时,预设置中出现过这样一条询问: 即是否选择历史模式,当时我们很坚决地选了否,那么哈希模式和历史模式究竟有什么区别,今天我们来一探究竟. 哈希模式( ...
- cmdb全总结
1.什么是cmdb ,做什么的? 配置管理数据库 ,就是存储基础设施的信息配置使用的 简单说就是CMDB这个系统可以自动发现网络上的IT设备 ,并自动存储相关信息 ,像一台服务器有型号 厂商 系统 c ...
- JS基础语法---阶段复习+作业练习+接下来知识点heads up
调试:调试代码---高级程序员都是从调试开始的 调试: 写代码---打开浏览器--F12(开发人员工具)--->Sources---双击文件,在某一行代码前面点击一下(出现的东西就是断点) 一元 ...
- 升鲜宝V2.0_杭州生鲜配送行业，条码标签管理之批量打印标签与分配配送任务相关操作说明_升鲜宝生鲜配送系统_15382353715_余东升
升鲜宝V2.0_杭州生鲜配送行业,条码标签管理之批量打印标签与分配配送任务相关操作说明_升鲜宝供应链管理生鲜配送系统 题外话,随着国家对食材安全这个行业重视性越来越强,最近国家又出具了一些 ...
- 【LeetCode】437. 路径总和 III
437. 路径总和 III 给定一个二叉树,它的每个结点都存放着一个整数值. 找出路径和等于给定数值的路径总数. 路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点 ...
- [收藏]Dubbo官方资料
首页 || 下载 || 用户指南 || 开发者指南 || 管理员指南 || 培训文档 || 常见问题解答 || 发布记录 || 发展路线 || 社区 English ...
- C语言中函数返回字符串的4中方法
C语言中函数返回字符串的4中方法 函数的构成部分:返回类型.函数名称.参数.函数主体 参数:函数调用时传入的参数称为实参,函数定义时出现的参数为形参 形参的作用在于接收实参传入的值,形参和函数内部的其 ...