CSS004. 自定义滚动条样式(webkit)
CSS
/* 滚动条宽度 */
::-webkit-scrollbar {
width: 6px;
} /* 轨道样式 */
::-webkit-scrollbar-track {
background-color: transparent;
} /* 滑块样式 */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 12px;
border-radius: 12px;
background: rgba(0, 0, 0, .2);
} /* 滑块悬停 */
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, .5);
}
Less
/* 滚动条宽度 */
::-webkit-scrollbar {
width: 6px;
} /* 轨道样式 */
::-webkit-scrollbar-track {
background-color: transparent;
} /* 滑块样式 */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 12px;
border-radius: 12px;
background: rgba(0, 0, 0, .2);
&:hover {
background: rgba(0, 0, 0, .5);
}
}
全局滚动条样式如上定义即可,若要对某个盒子局部修改,需要在 ::-webkit-scrollbar 前面加上该盒子的 class / id 或其他选择器:
.myDiv {
&::-webkit-scrollbar {
width: 6px;
}
}
尤其是Less的语法,xdm常常误以为只要把 ::-webkit-scrollbar 放在 .myDiv 的花括号包裹中就可以生效,实际上不会有任何的效果。
一定要在 ::-webkit-scrollbar 的前面加上 &
浏览器兼容性
由于是基于webkit内核提供的方法,所以部分其他内核的浏览器无法兼容,如果对兼容性需求较大,可以使用第三方组件库带有的滚动条或者手写一套滚动条。
通过测试的浏览器:Chrome、Safari、Edge、Opera、360、QQ、搜狗、遨游、猎豹、2345
未通过:IE11、Firefox
* 除注明版本的浏览器以外,测试均为发布文章时的最新版本 ( 2021-03-17 )
- END -
CSS004. 自定义滚动条样式(webkit)的更多相关文章
- CSS3自定义滚动条样式-webkit内核
自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- CSS自定义滚动条样式
原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
- 自定义滚动条样式-transition无效
问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...
- css中渐变的分割线和自定义滚动条样式
css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- 【CSS3】自定义滚动条样式 -webkit-scrollbar
好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...
随机推荐
- (2)用 if语句 区间判断
1 /*此例子只作为演示*/ 2 3 #include <stdio.h> 4 int main() 5 { 6 printf("请问贵公司给出的薪资是:\n"); 7 ...
- Java知识复习回顾
1.MVC 三层架构: M:Model 数据模型层 V:View 视图层 C:Controller控制器层 目的:解耦 2.Spring Spring:轻量级的Java开源框架,容器,目的是解决企业级 ...
- CentOS后台服务管理类
目录 一.service 后台服务管理(临时,只对当前有效) 二.chkconfig 设置后台服务的自启配置(永久) 三.CentOS7 后添加的命令:systemctl 一.service 后台服务 ...
- Linux进程理解与实践(五)细谈守护进程
一. 守护进程及其特性 守护进程最重要的特性是后台运行.在这一点上DOS下的常驻内存程序TSR与之相似.其次,守护进程必须与其运行前的环境隔离开来.这些环境包括未关闭的文件描述符,控制终端, ...
- Java之JSTL标签与JavaBean
Java之JSTL标签与JavaBean JSP.JSTL标签及 EL表达式 <!-- jstl表达式--> <dependency> <groupId>javax ...
- Windows内核开发-6-内核机制 Kernel Mechanisms
Windows内核开发-6-内核机制 Kernel Mechanisms 一部分Windows的内核机制对于驱动开发很有帮助,还有一部分对于内核理解和调试也很有帮助. Interrupt Reques ...
- BeautifulSoup4的使用
一.介绍 Beautiful Soup 主要是用来解析提取 HTML 和 XML 文件中的数据. 现在官网推荐使用 Beautiful Soup 4 ,已经被移植到了BS4中. 安装 Beautifu ...
- mpu6050控制舵机云台
准备材料:2个舵机mg90,云台支架,1个arduino-uno,mpu6050 编程工具:VScode-platformio or ArduinoIDE 我使用的是VScode在编辑代码上会更方 ...
- 带你读AI论文丨LaneNet基于实体分割的端到端车道线检测
摘要:LaneNet是一种端到端的车道线检测方法,包含 LanNet + H-Net 两个网络模型. 本文分享自华为云社区<[论文解读]LaneNet基于实体分割的端到端车道线检测>,作者 ...
- Aspen.net core 身份认证