啥都不说先看图:

注: 只适合chrom,不适用IE和fireFox

下面展示代码:

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>CSS3自定义滚动条-轩枫阁</title>
  5. <style>
  6. header
  7. {
  8. font-family: 'Lobster', cursive;
  9. text-align: center;
  10. font-size: 25px;
  11. }
  12.  
  13. #info
  14. {
  15. font-size: 18px;
  16. color: #;
  17. text-align: center;
  18. margin-bottom: 25px;
  19. }
  20.  
  21. a{
  22. color: #074E8C;
  23. }
  24.  
  25. .scrollbar
  26. {
  27. margin-left: 30px;
  28. float: left;
  29. height: 300px;
  30. width: 65px;
  31. background: #F5F5F5;
  32. overflow-y: scroll;
  33. margin-bottom: 25px;
  34. }
  35.  
  36. .force-overflow
  37. {
  38. min-height: 450px;
  39. }
  40.  
  41. #wrapper
  42. {
  43. text-align: center;
  44. width: 500px;
  45. margin: auto;
  46. }
  47.  
  48. /*
  49. * STYLE 1
  50. */
  51.  
  52. #style-::-webkit-scrollbar-track
  53. {
  54. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  55. border-radius: 10px;
  56. background-color: #F5F5F5;
  57. }
  58.  
  59. #style-::-webkit-scrollbar
  60. {
  61. width: 12px;
  62. background-color: #F5F5F5;
  63. }
  64.  
  65. #style-::-webkit-scrollbar-thumb
  66. {
  67. border-radius: 10px;
  68. -webkit-box-shadow: inset 6px rgba(,,,.);
  69. background-color: #;
  70. }
  71.  
  72. /*
  73. * STYLE 2
  74. */
  75.  
  76. #style-::-webkit-scrollbar-track
  77. {
  78. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  79. border-radius: 10px;
  80. background-color: #F5F5F5;
  81. }
  82.  
  83. #style-::-webkit-scrollbar
  84. {
  85. width: 12px;
  86. background-color: #F5F5F5;
  87. }
  88.  
  89. #style-::-webkit-scrollbar-thumb
  90. {
  91. border-radius: 10px;
  92. -webkit-box-shadow: inset 6px rgba(,,,.);
  93. background-color: #D62929;
  94. }
  95.  
  96. /*
  97. * STYLE 3
  98. */
  99.  
  100. #style-::-webkit-scrollbar-track
  101. {
  102. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  103. background-color: #F5F5F5;
  104. }
  105.  
  106. #style-::-webkit-scrollbar
  107. {
  108. width: 6px;
  109. background-color: #F5F5F5;
  110. }
  111.  
  112. #style-::-webkit-scrollbar-thumb
  113. {
  114. background-color: #;
  115. }
  116.  
  117. /*
  118. * STYLE 4
  119. */
  120.  
  121. #style-::-webkit-scrollbar-track
  122. {
  123. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  124. background-color: #F5F5F5;
  125. }
  126.  
  127. #style-::-webkit-scrollbar
  128. {
  129. width: 10px;
  130. background-color: #F5F5F5;
  131. }
  132.  
  133. #style-::-webkit-scrollbar-thumb
  134. {
  135. background-color: #;
  136. border: 2px solid #;
  137. }
  138.  
  139. /*
  140. * STYLE 5
  141. */
  142.  
  143. #style-::-webkit-scrollbar-track
  144. {
  145. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  146. background-color: #F5F5F5;
  147. }
  148.  
  149. #style-::-webkit-scrollbar
  150. {
  151. width: 10px;
  152. background-color: #F5F5F5;
  153. }
  154.  
  155. #style-::-webkit-scrollbar-thumb
  156. {
  157. background-color: #0ae;
  158.  
  159. background-image: -webkit-gradient(linear, , %,
  160. color-stop(., rgba(, , , .)),
  161. color-stop(., transparent), to(transparent));
  162. }
  163.  
  164. /*
  165. * STYLE 6
  166. */
  167.  
  168. #style-::-webkit-scrollbar-track
  169. {
  170. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  171. background-color: #F5F5F5;
  172. }
  173.  
  174. #style-::-webkit-scrollbar
  175. {
  176. width: 10px;
  177. background-color: #F5F5F5;
  178. }
  179.  
  180. #style-::-webkit-scrollbar-thumb
  181. {
  182. background-color: #F90;
  183. background-image: -webkit-linear-gradient(45deg,
  184. rgba(, , , .) %,
  185. transparent %,
  186. transparent %,
  187. rgba(, , , .) %,
  188. rgba(, , , .) %,
  189. transparent %,
  190. transparent)
  191. }
  192.  
  193. /*
  194. * STYLE 7
  195. */
  196.  
  197. #style-::-webkit-scrollbar-track
  198. {
  199. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  200. background-color: #F5F5F5;
  201. border-radius: 10px;
  202. }
  203.  
  204. #style-::-webkit-scrollbar
  205. {
  206. width: 10px;
  207. background-color: #F5F5F5;
  208. }
  209.  
  210. #style-::-webkit-scrollbar-thumb
  211. {
  212. border-radius: 10px;
  213. background-image: -webkit-gradient(linear,
  214. left bottom,
  215. left top,
  216. color-stop(0.44, rgb(,,)),
  217. color-stop(0.72, rgb(,,)),
  218. color-stop(0.86, rgb(,,)));
  219. }
  220.  
  221. /*
  222. * STYLE 8
  223. */
  224.  
  225. #style-::-webkit-scrollbar-track
  226. {
  227. border: 1px solid black;
  228. background-color: #F5F5F5;
  229. }
  230.  
  231. #style-::-webkit-scrollbar
  232. {
  233. width: 10px;
  234. background-color: #F5F5F5;
  235. }
  236.  
  237. #style-::-webkit-scrollbar-thumb
  238. {
  239. background-color: #;
  240. }
  241.  
  242. /*
  243. * STYLE 9
  244. */
  245.  
  246. #style-::-webkit-scrollbar-track
  247. {
  248. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  249. background-color: #F5F5F5;
  250. }
  251.  
  252. #style-::-webkit-scrollbar
  253. {
  254. width: 10px;
  255. background-color: #F5F5F5;
  256. }
  257.  
  258. #style-::-webkit-scrollbar-thumb
  259. {
  260. background-color: #F90;
  261. background-image: -webkit-linear-gradient(90deg,
  262. rgba(, , , .) %,
  263. transparent %,
  264. transparent %,
  265. rgba(, , , .) %,
  266. rgba(, , , .) %,
  267. transparent %,
  268. transparent)
  269. }
  270.  
  271. /*
  272. * STYLE 10
  273. */
  274.  
  275. #style-::-webkit-scrollbar-track
  276. {
  277. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  278. background-color: #F5F5F5;
  279. border-radius: 10px;
  280. }
  281.  
  282. #style-::-webkit-scrollbar
  283. {
  284. width: 10px;
  285. background-color: #F5F5F5;
  286. }
  287.  
  288. #style-::-webkit-scrollbar-thumb
  289. {
  290. background-color: #AAA;
  291. border-radius: 10px;
  292. background-image: -webkit-linear-gradient(90deg,
  293. rgba(, , , .) %,
  294. transparent %,
  295. transparent %,
  296. rgba(, , , .) %,
  297. rgba(, , , .) %,
  298. transparent %,
  299. transparent)
  300. }
  301.  
  302. /*
  303. * STYLE 11
  304. */
  305.  
  306. #style-::-webkit-scrollbar-track
  307. {
  308. -webkit-box-shadow: inset 6px rgba(,,,0.3);
  309. background-color: #F5F5F5;
  310. border-radius: 10px;
  311. }
  312.  
  313. #style-::-webkit-scrollbar
  314. {
  315. width: 10px;
  316. background-color: #F5F5F5;
  317. }
  318.  
  319. #style-::-webkit-scrollbar-thumb
  320. {
  321. background-color: #3366FF;
  322. border-radius: 10px;
  323. background-image: -webkit-linear-gradient(0deg,
  324. rgba(, , , 0.5) %,
  325. transparent %,
  326. transparent %,
  327. rgba(, , , 0.5) %,
  328. rgba(, , , 0.5) %,
  329. transparent %,
  330. transparent)
  331. }
  332.  
  333. /*
  334. * STYLE 12
  335. */
  336.  
  337. #style-::-webkit-scrollbar-track
  338. {
  339. -webkit-box-shadow: inset 6px rgba(,,,0.9);
  340. border-radius: 10px;
  341. background-color: #;
  342. }
  343.  
  344. #style-::-webkit-scrollbar
  345. {
  346. width: 12px;
  347. background-color: #F5F5F5;
  348. }
  349.  
  350. #style-::-webkit-scrollbar-thumb
  351. {
  352. border-radius: 10px;
  353. background-color: #D62929;
  354. background-image: -webkit-linear-gradient(90deg,
  355. transparent,
  356. rgba(, , , 0.4) %,
  357. transparent,
  358. transparent)
  359. }
  360.  
  361. /*
  362. * STYLE 13
  363. */
  364.  
  365. #style-::-webkit-scrollbar-track
  366. {
  367. -webkit-box-shadow: inset 6px rgba(,,,0.9);
  368. border-radius: 10px;
  369. background-color: #CCCCCC;
  370. }
  371.  
  372. #style-::-webkit-scrollbar
  373. {
  374. width: 12px;
  375. background-color: #F5F5F5;
  376. }
  377.  
  378. #style-::-webkit-scrollbar-thumb
  379. {
  380. border-radius: 10px;
  381. background-color: #D62929;
  382. background-image: -webkit-linear-gradient(90deg,
  383. transparent,
  384. rgba(, , , 0.4) %,
  385. transparent,
  386. transparent)
  387. }
  388.  
  389. /*
  390. * STYLE 14
  391. */
  392.  
  393. #style-::-webkit-scrollbar-track
  394. {
  395. -webkit-box-shadow: inset 6px rgba(,,,0.6);
  396. background-color: #CCCCCC;
  397. }
  398.  
  399. #style-::-webkit-scrollbar
  400. {
  401. width: 10px;
  402. background-color: #F5F5F5;
  403. }
  404.  
  405. #style-::-webkit-scrollbar-thumb
  406. {
  407. background-color: #FFF;
  408. background-image: -webkit-linear-gradient(90deg,
  409. rgba(, , , ) %,
  410. rgba(, , , ) %,
  411. transparent %,
  412. rgba(, , , ) %,
  413. transparent)
  414. }
  415.  
  416. /*
  417. * STYLE 15
  418. */
  419.  
  420. #style-::-webkit-scrollbar-track
  421. {
  422. -webkit-box-shadow: inset 6px rgba(,,,0.1);
  423. background-color: #F5F5F5;
  424. border-radius: 10px;
  425. }
  426.  
  427. #style-::-webkit-scrollbar
  428. {
  429. width: 10px;
  430. background-color: #F5F5F5;
  431. }
  432.  
  433. #style-::-webkit-scrollbar-thumb
  434. {
  435. border-radius: 10px;
  436. background-color: #FFF;
  437. background-image: -webkit-gradient(linear,
  438. % %,
  439. % %,
  440. from(#4D9C41),
  441. to(#19911D),
  442. color-stop(.,#54DE5D));
  443. }
  444.  
  445. /*
  446. * STYLE 16
  447. */
  448.  
  449. #style-::-webkit-scrollbar-track
  450. {
  451. -webkit-box-shadow: inset 6px rgba(,,,0.1);
  452. background-color: #F5F5F5;
  453. border-radius: 10px;
  454. }
  455.  
  456. #style-::-webkit-scrollbar
  457. {
  458. width: 10px;
  459. background-color: #F5F5F5;
  460. }
  461.  
  462. #style-::-webkit-scrollbar-thumb
  463. {
  464. border-radius: 10px;
  465. background-color: #FFF;
  466. background-image: -webkit-linear-gradient(top,
  467. #e4f5fc %,
  468. #bfe8f9 %,
  469. #9fd8ef %,
  470. #2ab0ed %);
  471. }
  472.  
  473. /*
  474. * body
  475. */
  476. body::-webkit-scrollbar-track
  477. {
  478. -webkit-box-shadow: inset 6px rgba(,,,0.1);
  479. background-color: #F5F5F5;
  480. border-radius: 10px;
  481. }
  482.  
  483. body::-webkit-scrollbar
  484. {
  485. width: 10px;
  486. background-color: #F5F5F5;
  487. }
  488.  
  489. body::-webkit-scrollbar-thumb
  490. {
  491. border-radius: 10px;
  492. background-color: #FFF;
  493. background-image: -webkit-gradient(linear,% %,% %,from(#4D9C41),to(#19911D),color-stop(.,#54DE5D));
  494. }
  495.  
  496. </style>
  497. </head>
  498. <body>
  499. <div id="wrapper">
  500. <div class="scrollbar" id="style-default">
  501. <div class="force-overflow"></div>
  502. </div>
  503.  
  504. <div class="scrollbar" id="style-1">
  505. <div class="force-overflow"></div>
  506. </div>
  507.  
  508. <div class="scrollbar" id="style-2">
  509. <div class="force-overflow"></div>
  510. </div>
  511.  
  512. <div class="scrollbar" id="style-3">
  513. <div class="force-overflow"></div>
  514. </div>
  515.  
  516. <div class="scrollbar" id="style-4">
  517. <div class="force-overflow"></div>
  518. </div>
  519.  
  520. <div class="scrollbar" id="style-5">
  521. <div class="force-overflow"></div>
  522. </div>
  523.  
  524. <div class="scrollbar" id="style-6">
  525. <div class="force-overflow"></div>
  526. </div>
  527.  
  528. <div class="scrollbar" id="style-7">
  529. <div class="force-overflow"></div>
  530. </div>
  531.  
  532. <div class="scrollbar" id="style-8">
  533. <div class="force-overflow"></div>
  534. </div>
  535.  
  536. <div class="scrollbar" id="style-9">
  537. <div class="force-overflow"></div>
  538. </div>
  539.  
  540. <div class="scrollbar" id="style-10">
  541. <div class="force-overflow"></div>
  542. </div>
  543.  
  544. <div class="scrollbar" id="style-11">
  545. <div class="force-overflow"></div>
  546. </div>
  547.  
  548. <div class="scrollbar" id="style-13">
  549. <div class="force-overflow"></div>
  550. </div>
  551.  
  552. <div class="scrollbar" id="style-14">
  553. <div class="force-overflow"></div>
  554. </div>
  555.  
  556. <div class="scrollbar" id="style-15">
  557. <div class="force-overflow"></div>
  558. </div>
  559. </div>
  560. </body>
  561. </html>

自定义滚动条样式纯(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. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

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

  8. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  9. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

随机推荐

  1. API统一管理平台-YApi

    前言:开发过程中,会产生很多接口对接操作,这个时候可能需要一个接口管理平台管理已经开发好的接口方便业务对接. 一.概述 YApi 是高效.易用.功能强大的 api 管理平台,旨在为开发.产品.测试人员 ...

  2. SQLi-LABS Page-1(Basic Challenges) Less5-Less10

    Less5 GET - Double Injection - Single Quotes http://10.10.202.112/sqli/Less-5?id=1 http://10.10.202. ...

  3. 使用adb命令操控Android手机(adb命令)

    1) 手机连接电脑之前 首先,查看安卓手机是否已经连接上电脑 adb devices 让adb一直查找安卓设备,找到后才停止 adb wait-for-device 2) 手机连接电脑后的操作 2.0 ...

  4. html-css___table属性(设置细线边框)

    border-collapse 属性设置表格的边框是否被合并为一个单一的边框 //设置table实线边框 table,td{ /*边框合并*/ border-collapse: collapse; b ...

  5. Windows下使用PuTTY连接Centos7、Linux系统目录结构、一些操作命令

    PuTTY可以远程管理Linux.PuTTY官网:https://www.putty.org/ 一.使用PuTTY连接Centos7 下载安装后,打开如下图: 1.输入主机名或IP地址2.端口号默认2 ...

  6. 【三】Gradle中的Task

    gradle中,最经常被使用的,一个task,一个是dependencies 1.Task声明 task默认是DefaultTask类, Task中有两个属性 group description,最佳 ...

  7. Saltstack_使用指南18_API

    1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...

  8. HDFS与YARN HA部署配置文件

    core-site.xml <!--Yarn 需要使用 fs.defaultFS 指定NameNode URI --> <property> <name>fs.de ...

  9. Docker 运行一个Web应用

    使用 docker 构建一个 web 应用程序. 我们将在docker容器中运行一个 Python Flask 应用来运行一个web应用 参数说明: -d:让容器在后台运行. -P:将容器内部使用的网 ...

  10. Python进阶基础学习(多线程)

    Python进阶学习笔记(一) threading模块 threading.thread(target = (函数)) 负责定义子线程对象 threading.enumerate() 负责查看子线程对 ...