css3 自定义滚动条样式
::-webkit-scrollbar :滚动条整体部分
::-webkit-scrollbar-thumb :滚动条里面的小方块样式
::-webkit-scrollbar-track 滚动条的轨道
::-webkit-scrollbar-button 滚动条轨道两端的小按钮,允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道,
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-resizer 两个滚动条交汇处上用于通过拖动调整元素大小的小控价
/* Let's get this party started */
::-webkit-scrollbar {
width: 5px;
} /* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
border-radius: 21px;
} /* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius:5px;
border-radius: -9px;
background: #2f732f;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #6a9a6d;
}
css3 自定义滚动条样式的更多相关文章
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
- CSS3自定义滚动条样式 之 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar (一)
Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...
- 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)
有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...
- CSS3自定义滚动条样式-webkit内核
自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...
- CSS3自定义滚动条样式方法
该代码收集于网上资源,非原创 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: ...
- css3美化滚动条样式
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...
随机推荐
- 4.mysql(slow_log/generic_log/audit)
一.慢查询日志进阶 <1>相关参数 1.slow_query_log #是否开启慢查询日志 2.slow_query_log_file #慢查询日志文件名,在my.cnf我们已经定义为sl ...
- luogu 1772 物流运输 ZJOI2006 spfa+dp
主要路径上存在时间限制(消失) 因为数据较小(点数较小),利用限制条件在规定时间内分别spfa,(也可用floyd) 再通过dp取最优值 #include<bits/stdc++.h> # ...
- 结构体类型struct
教学视频 定义: struct student{CString name; int num; TCHAR sex; int age; }; //注意有个分号 student zansan = {_ ...
- Ubuntu18.04使用AndroidStudio3.2.1编译TensorFlow android demo【2018年12月】
按照官方教程修改下面3处即可编译完成. 修改部分: 在build.gradle文件里修改以下部分: 1.原来: buildscript { repositories { jcenter() } dep ...
- Maven 那点事儿(转)
0. 前言 Jason Van Zyl,在 Java 十大风云人物排行榜上或许会看到他. 这兄弟是干嘛的? 他就是 Maven 的创始人,人们都尊称他为“Maven 他爸”. 毋庸置疑,Jason 也 ...
- Spark SQL自定义外部数据源
1 涉及到的API BaseRelation: In a simple way, we can say it represents the collection of tuples with know ...
- java 弹出选择目录框(选择文件夹),获取选择的文件夹路径
java 弹出选择目录框(选择文件夹),获取选择的文件夹路径 java 弹出选择目录框(选择文件夹),获取选择的文件夹路径:int result = 0;File file = null;String ...
- java实现打印前台页面
核心:用window自带方法 window.print(); 打印的范围:body里内容,只要在页面能显示出来,都打印 遇到的问题:打印按钮被一起打印出来了,url也别打印出来了 解决办法:在触发打印 ...
- servlet增删改查
Servlet 使用Servlet进行增删改查 步骤 1. 导入以下几个jar包到WEB-INF下的lib包里,必要时build path,其中jstl.jar和standard.jar是使用jst ...
- python中的私有变量
class Test1: def f1(self): self.name ="张三" self.__age = 20 #使用名称变形实现私有变量 print(self.name) ...