::-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 之自定义滚动条样式的更多相关文章

  1. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  2. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

  3. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  4. 自定义滚动条样式-transition无效

    问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...

  5. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

  6. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  7. 「HTML+CSS」--自定义按钮样式【002】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  8. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  9. 自定义滚动条样式纯(css)

    啥都不说先看图: 注: 只适合chrom,不适用IE和fireFox 下面展示代码: <html lang="en"> <head> <meta ch ...

随机推荐

  1. PHP array_merge_recursive()

    定义和用法 array_merge_recursive() 函数与 array_merge()函数 一样,将一个或多个数组的元素的合并起来,一个数组中的值附加在前一个数组的后面.并返回作为结果的数组. ...

  2. 使用IDA破解TraceMe.exe

    我发现用IDA破解TraceMe.exe比ODeasy多了. 打开IDA 后.直接搜索"序列号".得到 双击跳转到反汇编窗体,按F5转换为类C++代码 signed int __s ...

  3. dhtmlx中添加一列(将相似button、下拉列表、输入框显示在一行上)

    { type: "label", list: [ { { type: "label", labelWidth: 55 }, { type: "newc ...

  4. Java Map 怎样实现Key 的唯一性?

    大家都知道.在Map和Set不可存在反复元素? 可是对于内部的细节我们并不了解.今天我们就一块来 探讨一下! 1 对于 HashMap  HashSet 他们的底层数据结构的实现是:维护了一张  Ha ...

  5. 鸟哥的Linux私房菜-----10、学习Bash

  6. LeetCode 706. Design HashMap (设计哈希映射)

    题目标签:HashMap 题目让我们设计一个 hashmap, 有put, get, remove 功能. 建立一个 int array, index 是key, 值是 value,具体看code. ...

  7. URAL 1326. Bottle Taps(简单的状压dp)

    题目不太好读懂,就是先给你一个n代表要从n个物品中买东西,然后告诉你这n个东西的单位价格,在给你m个集合的情况.就是每一个结合中有x件物品.他们合起来买的价格是k.这x件物品依次是:p1--px.之后 ...

  8. bzoj3894: 文理分科(还是那道最小割)

    3894: 文理分科 题目:传送门 感谢波老师没有来D飞我,让我做出了这题... 题解: 这题其实和我做的上一题(bzoj2132)很像,所以就不写题意了. 依然是那最小割... 这题给出了四个利益矩 ...

  9. Modular_exponentiation模幂运算

    https://en.wikipedia.org/wiki/Modular_exponentiation 蒙哥马利(Montgomery)幂模运算是快速计算a^b%k的一种算法,是RSA加密算法的核心 ...

  10. 转 一个SMD 0805的LED的电流,电压,亮度关系表

    Vf就是led的导通电压. 一个SMD 0805的LED的电流,电压,亮度关系表Vf              If(算)     亮度1.74v       0.46mA      做指示灯不刺眼刚 ...