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 ...
随机推荐
- 使用paramiko模块进行封装，远程操作linux主机
import time import paramiko class HandleParamiko: ''' 定义一个linux处理类 ''' def __init__(self, hostname, ...
- MySQL入门——在Linux下安装和卸载MariaDB
MySQL入门——在Linux下安装和卸载MariaDB 摘要:本文主要学习了如何在Linux系统中安装和卸载MariaDB数据库. 查看有没有安装过MariaDB 使用命令查看有没有安装过: [ro ...
- Python【day 15-3】函数部分
'''''' ''' 一.函数 1.函数定义 对功能或者动作的封装 在类中定义,就是方法 在类之外定义,就是函数 2.函数写法 1.定义或者申明函数 def 函数名(形参列表): 函数体(return ...
- Create an XAF Application 创建一个XAF应用程序
This topic describes how to use the Solution Wizard to create XAF applications and specify a connect ...
- iOS9新框架—Watch Connectivity（详情：http://ios.itcast.cn/subject/ios9/index.shtml ）
1背景. Watch Connectivity--专为用来实现Watch与配对iPhone上的文件和数据的来回传输而生. 2.iOS8与iOS9发送数据的对比. 我们知道数据交换在iOS8中就有,我们 ...
- andriod8.1.0源码编译中的一个坑-package com.sun.javadoc does not exist
这里记录编译过程中的一个坑!!! 编译过程中出现了下面的报错 external/doclava/src/com/google/doclava/ClassInfo.java:20: error: pac ...
- nginx的共享字典项api（操作方法）
nginx的共享内存,称为共享字典项,对于所有的worker进程都可见,是一种全局变量. 备注一下内容中的 [] 是 备注. 源码分析文档:https://www.codercto.com/a/948 ...
- 不能聚焦元素问题 WebDriverException: Message: unknown error: cannot focus element
上周碰到了 Unable to locate element,即“无法定位元素”,后靠两行代码解决: wait = ui.WebDriverWait(driver,5) wait.until(lamb ...
- jmeter BeanShell的几种使用方式
jmeter的BeanShell Sampler,可以直接引用java代码,有下面3种方式: 1.直接输入java代码:2.导入java文件:3.导入class文件 BeanShell脚本访问变量主要 ...
- Html学习之十二（CSS选择器的应用二）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...