::-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. FTP用户-禁止登录系统

    OS是Ubuntu 11.10. 1.   which nologin #/usr/sbin/nologin 2.   vim /etc/shells   #在该文件后添加/usr/sbin/nolo ...

  2. 运行系统命令而且将输出写到指定日志文件的shell脚本(2)

    上一篇是个简单的能够运行而且写入日志的脚本,可是假设放到生产环境上就显得太粗糙了,所以须要进一步的优化: #! /bin/bash if [ -d "/opt/bmc" ] ; t ...

  3. android自己定义之 5.0 风格progressBar

    近期做项目,用到了ProgressBar .就想到了要使用Android5.0 的效果,就随手实现了一下. 效果图: 大概的思路: 1. 圆圈通过Canvas去绘制 2.圆圈的动画通过Animator ...

  4. border-image 和 border-color 不能同时使用问题

    遇到如下问题: UI 给的设计,某部分,上边框为 图片,下边框为灰色横线. 看到这个的第一反应是,上边框用 border-image ,为了只让上边框显示图片,所以只给上边框宽度为所需宽度,我的图是 ...

  5. CentOS6.5配置代理上网

    虚拟机vmWare下装了个CentOS,第一件事是配置代理上网,因为工作环境需要使用代理上网,但发觉与uBuntu不同,根本没有什么/etc/environment. 在网上疯狂搜索,都说要配置/et ...

  6. 【POJ 3190】 Stall Reservations

    [题目链接] http://poj.org/problem?id=3190 [算法] 将这些牛按开始吃草的时间排序 维护一个数组S,Si表示畜栏i进去的最后一头牛结束吃草的时间,对于每头牛,找任意一个 ...

  7. openstack instance resize Resize error: Unable to resize disk down

  8. 过河 2005年NOIP全国联赛提高组(离散化+dp)

    1105 过河 2005年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond       题目描述 Description 在河上有一 ...

  9. Windows(7/8/10)搭建Elasticsearch 6.x版本

    今天公司用到了Elasticsearch ,记录一下单机版搭建的流程. 首先我们来看下什么是Elasticsearch : ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分 ...

  10. go 简单路由实现

    一.golang 路由实现的简单思路 1.http启动后,请求路径时走统一的入口函数 1.通过统一函数入口,获取request 的url路径 2.通过对url的路径分析,确定具体执行什么函数 二.统一 ...