::-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. bbed改动undo段状态(ORA-01578)

    ZBDBA@orcl11g>select * from zbdba; select * from zbdba * ERROR at line 1: ORA-01578: ORACLE data ...

  2. 有用 .htaccess 使用方法大全

    这里收集的是各种有用的 .htaccess 代码片段,你能想到的使用方法差点儿全在这里. 免责声明: 尽管将这些代码片段直接复制到你的 .htaccess 文件中,绝大多数情况下都是好用的,但也有极个 ...

  3. cojs 1175. [顾研NOIP] 旅游电车

    1175. [顾研NOIP] 旅游电车 ★★☆   输入文件:buss.in   输出文件:buss.out   简单对比时间限制:1 s   内存限制:256 MB [问题描述] Henryy国正致 ...

  4. Scala 方法接受变参

    def Parametron(strings:String*): Unit ={ strings.foreach(x=>{ println(x) ") println(s"* ...

  5. Coursera Algorithms week4 基础标签表 练习测验:Check if a binary tree is a BST

    题目原文: Given a binary tree where each 

  6. HIT1917Peaceful Commission(2-SAT)

    Peaceful Commission   Source : POI 2001   Time limit : 10 sec   Memory limit : 32 M Submitted : 2112 ...

  7. codevs2503失恋28天......(背包dp)

    503 失恋28天-缝补礼物  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold   题目描述 Description 话说上回他给女孩送了n件礼物,由于是廉价的所以 ...

  8. 关于 node.js 小插曲

    随着web2.0的时代到来,javascript在前端担任了更多的职责,事件也看得到了广泛的应用,node不像rhino那样受java的影响很大,而是将前端浏览器中应用广泛企鹅成熟的事件引入后端,配合 ...

  9. [Swift通天遁地]五、高级扩展-(8)ImageView(图像视图)的各种扩展方法

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  10. Django day26 HyperlinkedIdentityField,序列化组件的数据校验以及功能的(全局,局部)钩子函数,序列化组件的反序列化和保存

    一:HyperlinkedIdentityField(用的很少):传三个参数:第一个路由名字,用来反向解析,第二个参数是要反向解析的参数值,第三个参数:有名分组的名字 -1 publish = ser ...