::-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. Hadoop 究竟能做什么?

    http://hi.baidu.com/jiuxiaoyao/item/ff0a19e5b09a953a87d9def3 现在好像大家都在讲 大数据 云计算 hadopp .那么hadoop究竟能做些 ...

  2. uva 11212 - Editing a Book(迭代加深搜索 IDA*) 迭代加深搜索

    迭代加深搜索 自己看的时候第一遍更本就看不懂..是非常水,但智商捉急也是没有办法的事情. 好在有几个同学已经是做过了这道题而且对迭代加深搜索的思路有了一定的了解,所以在某些不理解的地方询问了一下他们的 ...

  3. 查看程序占用tomcat内存情况

    近期,公司线上tomcat常常无缘无辜宕机.总结了一下定位问题的方法,仅供參考: 报错信息: Maximum number of threads (200) created for connector ...

  4. Tomcat手工搭建Jsp和Servlet程序

    要执行J2EE的程序,就必须安装相关的容器.而怎样选择JSP+Servlet模式.Tomcat是非常重要的选择之中的一个,是世界上最为广泛的Servlet和JSP容器. 下载: 1. URL: htt ...

  5. Python3基础(五) 函数

    函数(function)是组织好的.可重复使用的.具有一定功能的代码段.函数能提高应用的模块性和代码的重复利用率,Python中已经提供了很多内建函数,比如print(),同时Python还允许用户自 ...

  6. 解决MyEclipse中导入项目@Override错误

    做项目的时候,同事那边电脑上编译通过的java代码,或者是网上下载的例子代码,导入project后却是编译不通过,总是@override报错,把@override去掉就好了,有时候@Override出 ...

  7. POJ 1741 Tree 树形DP(分治)

    链接:id=1741">http://poj.org/problem?id=1741 题意:给出一棵树,节点数为N(N<=10000),给出N-1条边的两点和权值,给出数值k,问 ...

  8. mac 下安装caffe(一)

    1.brew install --build-from-source -vd boost boost-python 这一步出错:libtool: unrecognized option `-stati ...

  9. ORACLE 11G 怎样改动 awr 的保留期限小于8天

     ORACLE 11G 怎样改动 awr 的保留期限小于8天 Oracle Database 11g 默认具备一个系统定义的Moving Window Baseline,该基线相应于 AWR 保留 ...

  10. 并行运维工具pssh的安装及实战应用

    并行运维工具pssh的安装及实战应用 - CSDN博客 https://blog.csdn.net/field_yang/article/details/68066468