CSS 之自定义滚动条样式
::-webkit-scrollbar {/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
效果如图:
CSS 之自定义滚动条样式的更多相关文章
- CSS自定义滚动条样式
原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...
- css中渐变的分割线和自定义滚动条样式
css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义滚动条样式-transition无效
问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...
- WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- 「HTML+CSS」--自定义按钮样式【002】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 使用css实现无滚动条滚动+使用插件自定义滚动条样式
使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...
- 自定义滚动条样式纯(css)
啥都不说先看图: 注: 只适合chrom,不适用IE和fireFox 下面展示代码: <html lang="en"> <head> <meta ch ...
随机推荐
- CSS filter 模拟黑洞照片效果
今天被世界上第一张黑洞照片刷屏. 一整天,哪里都是这张照片.看的多了.我就想用css做一个吧. 建议在chrome上查看. 访问地址:http://suohb.com/work/blankHole.h ...
- uva 11552 dp
UVA 11552 - Fewest Flops 一个字符串,字符串每 k 个当作一组,组中的字符顺序能够重组.问经过重组后改字符串能够编程最少由多少块字符组成.连续的一段字符被称为块. dp[i][ ...
- Android高仿UC浏览器和360手机卫士消息常驻栏(通知栏)
之前网上看了下自己定义消息栏,通知栏,了解到了Notification这个控件.发现UC浏览器等都是这样的类型,今天写个demo实现下.如图: 当中每一个button都有不同的功能.代码例如以下: p ...
- 深入struts2(二) ---stuts2长处和主要包、类功能
1.1 Struts2 上节已讲.struts2在webwork基础发展起来的mvc框架.MVC框架相信一般码农都比較了解,这里不再重说. 在这里只对于一下struts1,struts2做了哪 ...
- Java程序执行超时——Future接口介绍
在Java中,如果需要设定代码执行的最长时间,即超时,可以用Java线程池ExecutorService类配合Future接口来实现. Future接口是Java标准API的一部分,在java.uti ...
- keepalived+nginx安装配置
软件版本号: pcre8.36 ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.36.tar.gz keepalived1.2 ...
- MySQL运行计划初探
-Mysql运行计划总结– 1 运行计划概述 先看看一个运行计划 mysql> explain SELECT * FROM EMP , DAO_OBJECTS t1 , DAO_OBJECTS ...
- ios9--UIImageView的帧动画
// // ViewController.m // 05-UIImageView的帧动画 // #import "ViewController.h" @interface View ...
- bzoj3332: 旧试题
这题就是最大生成树. 把两个点之间的期望建边排序. 把相同的期望一起做,那么在这个做之前,这些有着相同期望的点两两肯定不连,否则就输出No了. 相同的做完之后,再次for一遍check一下有没有两两之 ...
- 第二章 在Html中使用JavaScript
https://www.jianshu.com/p/8247a9401725 2.1 Script元素 https://developer.mozilla.org/en-US/docs/Web/HTM ...