::-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. pojo类对应的就是数据库中的表,pojo类属性类型一定要用包装类Integer等

    pojo类对应的就是数据库中的表,pojo类属性类型一定要用包装类Integer等 pojo类对应的就是数据库中的表,pojo类属性类型一定要用包装类Integer等 pojo类对应的就是数据库中的表 ...

  2. 如何使用PHP显示在线Word文档

    在线生成FlashPaper文档 1 安装 FlashPaper2,最好下载绿色版的FlashPaper软件,如下所示,先点击初始化.bat即开始绿化,然后双击"FlashPrinter.e ...

  3. [LeetCode][Java] N-Queens II

    题目: Follow up for N-Queens problem. Now, instead outputting board configurations, return the total n ...

  4. C++中的继承与虚函数各种概念

    虚继承与一般继承 虚继承和一般的继承不同,一般的继承,在目前大多数的C++编译器实现的对象模型中,派生类对象会直接包含基类对象的字段.而虚继承的情况,派生类对象不会直接包含基类对象的字段,而是通过一个 ...

  5. MongoDB集群——分片

    1. 分片的结构及原理分片集群结构分布: 分片集群主要由三种组件组成:mongos,config server,shard1) MONGOS数据库集群请求的入口,所有的请求都通过mongos进行协调, ...

  6. 从基于 SQL 的 CURD 操作转移到基于语义 Web 的 CURD 操作

    中文名称 CURD 含义 数据库技术中的缩写词 操作对象 一般的项目开发的各种参数 作用 用于处理数据的基本原子操作     它代表创建(Create).更新(Update).读取(Retrieve) ...

  7. side-stepping the Global Interpreter Lock by using subprocesses instead of threads

    16.6. multiprocessing — Process-based “threading” interface — Python 2.7.14 documentation https://do ...

  8. java.lang.NoClassDefFoundError: org/apache/commons/lang/xwork/StringUtils

    java.lang.NoClassDefFoundError: org/apache/commons/lang/xwork/StringUtils Struts2框架下使用JSON插件时.程序保存找不 ...

  9. Ubuntu 16.04 安装CodeBlocks

    首先将软件源添加进来,就是运行以下命令 sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update 完 ...

  10. Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图

    Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图 Bing Maps Silverlight Control虽然为我们提供了简洁.方便的开发模 ...