【转】滚动条样式

编程语言 2018-05-10 01:26:03 阅读次数: 2

http://blog.csdn.net/hanshileiai/article/details/40398177

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  • ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
  • ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？

伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。

 

 

  1. :horizontal  
  2. //horizontal伪类适用于任何水平方向上的滚动条  
  3.   
  4. :vertical  
  5. //vertical伪类适用于任何垂直方向的滚动条  
  6.   
  7. :decrement  
  8. //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮  
  9.   
  10. :increment  
  11. //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮  
  12.   
  13. :start  
  14. //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面  
  15.   
  16. :end  
  17. //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面  
  18.   
  19. :double-button  
  20. //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  21.   
  22. :single-button  
  23. //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  24.   
  25. :no-button  
  26. no-button伪类表示轨道结束的位置没有按钮。  
  27.   
  28. :corner-present  
  29. //corner-present伪类表示滚动条的角落是否存在。  
  30.   
  31. :window-inactive  
  32. //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。  
  33.   
  34. ::-webkit-scrollbar-track-piece:start {  
  35. /*滚动条上半边或左半边*/  
  36. }  
  37.   
  38. ::-webkit-scrollbar-thumb:window-inactive {  
  39. /*当焦点不在当前区域滑块的状态*/  
  40. }  
  41.   
  42. ::-webkit-scrollbar-button:horizontal:decrement:hover {  
  43. /*当鼠标在水平滚动条下面的按钮上的状态*/  
  44. }  

----------------------------------------------------------------------------------------------------------------------------------

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>CSS3自定义滚动条图片版-轩枫阁</title>
  <style>
  *{
  margin: 0;
  padding: 0;
  }
  #container{
  width: 100%;
  height: 1200px;
  line-height: 600px;
  text-align: center;
  background: #ccc;
  }
  /*定义滚动条的高宽*/
  ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  }
  /*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
  /*显示滚动条上方的渐增按钮*/
  ::-webkit-scrollbar-button:start:decrement,
  /*显示滚动条上方的渐减按钮*/
  ::-webkit-scrollbar-button:end:increment {
  display: block;
  }
  /*隐藏滚动条上方的渐增按钮*/
  ::-webkit-scrollbar-button:vertical:start:increment,
  ::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
  }
  /* 定义滚动条渐增按扭的样式 */
  ::-webkit-scrollbar-button:end:increment {
  background-image: url(./images/scroll_cntrl_dwn.png);
  }
  /* 定义滚动条渐减按扭的样式 */
  ::-webkit-scrollbar-button:start:decrement {
  background-image: url(./images/scroll_cntrl_up.png);
  }
  /* 垂直滚动条的第三层轨道的上段 */
  ::-webkit-scrollbar-track-piece:vertical:start {
  background-image: url(./images/scroll_gutter_top.png), url(./images/scroll_gutter_mid.png);
  background-repeat: no-repeat, repeat-y;
  }
  /* 垂直滚动条的第三层轨道的下段 */
  ::-webkit-scrollbar-track-piece:vertical:end {
  background-image: url(./images/scroll_gutter_btm.png), url(./images/scroll_gutter_mid.png);
  background-repeat: no-repeat, repeat-y;
  background-position: bottom left, 0 0;
  }
  /* 垂直滚动条的滑动块 */
  ::-webkit-scrollbar-thumb:vertical {
  height: 56px;
  -webkit-border-image: url(./images/scroll_thumb.png) 8 0 8 0 stretch stretch;
  border-width: 8 0 8 0;
  }
   
  </style>
  </head>
  <body>
  <div id="container">CSS3自定义滚动条图片版<br/>请在chrome下看右侧滚动条，其他浏览器没有效果哦</div>
  </body>
 

</html>

------------------------------------------------------------------------------------------------------------------------------

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>CSS3自定义滚动条-轩枫阁</title>
  <style>
  header
  {
  font-family: 'Lobster', cursive;
  text-align: center;
  font-size: 25px;
  }
   
  #info
  {
  font-size: 18px;
  color: #555;
  text-align: center;
  margin-bottom: 25px;
  }
   
  a{
  color: #074E8C;
  }
   
  .scrollbar
  {
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
  }
   
  .force-overflow
  {
  min-height: 450px;
  }
   
  #wrapper
  {
  text-align: center;
  width: 500px;
  margin: auto;
  }
   
  /*
  * STYLE 1
  */
   
  #style-1::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
  }
   
  #style-1::-webkit-scrollbar
  {
  width: 12px;
  background-color: #F5F5F5;
  }
   
  #style-1::-webkit-scrollbar-thumb
  {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
  }
   
  /*
  * STYLE 2
  */
   
  #style-2::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
  }
   
  #style-2::-webkit-scrollbar
  {
  width: 12px;
  background-color: #F5F5F5;
  }
   
  #style-2::-webkit-scrollbar-thumb
  {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #D62929;
  }
   
  /*
  * STYLE 3
  */
   
  #style-3::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  }
   
  #style-3::-webkit-scrollbar
  {
  width: 6px;
  background-color: #F5F5F5;
  }
   
  #style-3::-webkit-scrollbar-thumb
  {
  background-color: #000000;
  }
   
  /*
  * STYLE 4
  */
   
  #style-4::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  }
   
  #style-4::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-4::-webkit-scrollbar-thumb
  {
  background-color: #000000;
  border: 2px solid #555555;
  }
   
   
  /*
  * STYLE 5
  */
   
  #style-5::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  }
   
  #style-5::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-5::-webkit-scrollbar-thumb
  {
  background-color: #0ae;
   
  background-image: -webkit-gradient(linear, 0 0, 0 100%,
  color-stop(.5, rgba(255, 255, 255, .2)),
  color-stop(.5, transparent), to(transparent));
  }
   
   
  /*
  * STYLE 6
  */
   
  #style-6::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  }
   
  #style-6::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-6::-webkit-scrollbar-thumb
  {
  background-color: #F90;
  background-image: -webkit-linear-gradient(45deg,
  rgba(255, 255, 255, .2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255, 255, 255, .2) 50%,
  rgba(255, 255, 255, .2) 75%,
  transparent 75%,
  transparent)
  }
   
   
  /*
  * STYLE 7
  */
   
  #style-7::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  border-radius: 10px;
  }
   
  #style-7::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-7::-webkit-scrollbar-thumb
  {
  border-radius: 10px;
  background-image: -webkit-gradient(linear,
  left bottom,
  left top,
  color-stop(0.44, rgb(122,153,217)),
  color-stop(0.72, rgb(73,125,189)),
  color-stop(0.86, rgb(28,58,148)));
  }
   
  /*
  * STYLE 8
  */
   
  #style-8::-webkit-scrollbar-track
  {
  border: 1px solid black;
  background-color: #F5F5F5;
  }
   
  #style-8::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-8::-webkit-scrollbar-thumb
  {
  background-color: #000000;
  }
   
   
  /*
  * STYLE 9
  */
   
  #style-9::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  }
   
  #style-9::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-9::-webkit-scrollbar-thumb
  {
  background-color: #F90;
  background-image: -webkit-linear-gradient(90deg,
  rgba(255, 255, 255, .2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255, 255, 255, .2) 50%,
  rgba(255, 255, 255, .2) 75%,
  transparent 75%,
  transparent)
  }
   
   
  /*
  * STYLE 10
  */
   
  #style-10::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  border-radius: 10px;
  }
   
  #style-10::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-10::-webkit-scrollbar-thumb
  {
  background-color: #AAA;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(90deg,
  rgba(0, 0, 0, .2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(0, 0, 0, .2) 50%,
  rgba(0, 0, 0, .2) 75%,
  transparent 75%,
  transparent)
  }
   
   
  /*
  * STYLE 11
  */
   
  #style-11::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  border-radius: 10px;
  }
   
  #style-11::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-11::-webkit-scrollbar-thumb
  {
  background-color: #3366FF;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(0deg,
  rgba(255, 255, 255, 0.5) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255, 255, 255, 0.5) 50%,
  rgba(255, 255, 255, 0.5) 75%,
  transparent 75%,
  transparent)
  }
   
  /*
  * STYLE 12
  */
   
  #style-12::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
  border-radius: 10px;
  background-color: #444444;
  }
   
  #style-12::-webkit-scrollbar
  {
  width: 12px;
  background-color: #F5F5F5;
  }
   
  #style-12::-webkit-scrollbar-thumb
  {
  border-radius: 10px;
  background-color: #D62929;
  background-image: -webkit-linear-gradient(90deg,
  transparent,
  rgba(0, 0, 0, 0.4) 50%,
  transparent,
  transparent)
  }
   
  /*
  * STYLE 13
  */
   
  #style-13::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
  border-radius: 10px;
  background-color: #CCCCCC;
  }
   
  #style-13::-webkit-scrollbar
  {
  width: 12px;
  background-color: #F5F5F5;
  }
   
  #style-13::-webkit-scrollbar-thumb
  {
  border-radius: 10px;
  background-color: #D62929;
  background-image: -webkit-linear-gradient(90deg,
  transparent,
  rgba(0, 0, 0, 0.4) 50%,
  transparent,
  transparent)
  }
   
  /*
  * STYLE 14
  */
   
  #style-14::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
  background-color: #CCCCCC;
  }
   
  #style-14::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-14::-webkit-scrollbar-thumb
  {
  background-color: #FFF;
  background-image: -webkit-linear-gradient(90deg,
  rgba(0, 0, 0, 1) 0%,
  rgba(0, 0, 0, 1) 25%,
  transparent 100%,
  rgba(0, 0, 0, 1) 75%,
  transparent)
  }
   
  /*
  * STYLE 15
  */
   
  #style-15::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  background-color: #F5F5F5;
  border-radius: 10px;
  }
   
  #style-15::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-15::-webkit-scrollbar-thumb
  {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-gradient(linear,
  40% 0%,
  75% 84%,
  from(#4D9C41),
  to(#19911D),
  color-stop(.6,#54DE5D))
  }
   
  /*
  * STYLE 16
  */
   
  #style-16::-webkit-scrollbar-track
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  background-color: #F5F5F5;
  border-radius: 10px;
  }
   
  #style-16::-webkit-scrollbar
  {
  width: 10px;
  background-color: #F5F5F5;
  }
   
  #style-16::-webkit-scrollbar-thumb
  {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-linear-gradient(top,
  #e4f5fc 0%,
  #bfe8f9 50%,
  #9fd8ef 51%,
  #2ab0ed 100%);
  }
   
   
  </style>
  </head>
  <body>
  <div id="wrapper">
  <div class="scrollbar" id="style-default">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-2">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-3">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-4">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-5">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-6">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-7">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-8">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-9">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-10">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-11">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-13">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-14">
  <div class="force-overflow"></div>
  </div>
   
  <div class="scrollbar" id="style-15">
  <div class="force-overflow"></div>
  </div>
  </div>
  </body>
 

</html>

猜你喜欢

转载自anole1982.iteye.com/blog/2355551
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022