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 ...
随机推荐
- Nginx超时设定
最近针对公司的goscon网关发了一个PR,新增了握手阶段的超时判定.现在回顾一下Nginx的所有超时判定,看看目前还缺少哪些判定 ngx_http_core_module包含的timeout: cl ...
- .Net Core技术研究-WebApi迁移ASP.NET Core2.0
随着ASP.NET Core 2.0发布之后,原先运行在Windows IIS中的ASP.NET WebApi站点,就可以跨平台运行在Linux中.我们有必要先说一下ASP.NET Core. ASP ...
- WPF——如何为项目设置全局样式。
在项目中,需要为所有的Button.TextBox设置一个默认的全局样式,一个个的为多个控件设置相同的样式显然是不明智的.在WPF中可以通过资源设置全局样式,主要有俩种方法: 1.第一种就是先写好按钮 ...
- jdk api 1.6，1.7，1.8，1.9版本(中文)
有需要的朋友,请自行到百度云下载 链接:https://pan.baidu.com/s/18WgEZ1WpBz5YexbbgikJcA 提取码:xry4
- django1-web开发基础知识
1.http概述 当前版本:1.1 http协议是一个客户端和服务端请求应答的标准TCP,如浏览器作为客户端发送请求到服务器指定端口 ,服务器将内容返回给服务器 2.协议格式 http定义了客户端与服 ...
- Linux域名服务DNS
什么是 DNS DNS 全称是 Domain Name System,大意是域名解析系统,它的职责是把域名翻译成一个一个可以识别的 IP 供不同的计算机设备连接. linux 有关 DNS 解析的配置 ...
- DevOps 工程师成长日记系列一：必备知识与技能组合
原文地址:https://medium.com/@devfire/how-to-become-a-devops-engineer-in-six-months-or-less-366097df7737 ...
- Spring Cloud Netflix Hystrix介绍和使用
前面我们搭建了具有服务降级功能的Hystrix客户端,现在我们来详细了解下Hystrix的一些功能. Hystrix的意思是豪猪,大家都知道,就是长满刺的猪...实际上,它表明了该框架的主要功能:自我 ...
- ansible错误ImportError: No module named ansible.runner记录
按着官网提供的安装ansible To configure the PPA on your machine and install ansible run these commands: $ sudo ...
- MySQL数据库无法使用+号连接字符串的处理方法
转自:http://www.maomao365.com/?p=10003 摘要: 下文讲述MySQL数据库,字符串连接的方法分享,如下所示:实现思路: 使用concat函数对两个字符串进行连接在MyS ...