关灯
开启左侧

自定义浏览器滚动条的样式

[复制链接]
老蚊子 发表于 2018-11-21 08:44:39 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
webkit内核的浏览器滚动条定制
在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。

  1. ::-webkit-scrollbar              { /* 1 */ }
  2. ::-webkit-scrollbar-button       { /* 2 */ }
  3. ::-webkit-scrollbar-track        { /* 3 */ }
  4. ::-webkit-scrollbar-track-piece  { /* 4 */ }
  5. ::-webkit-scrollbar-thumb        { /* 5 */ }
  6. ::-webkit-scrollbar-corner       { /* 6 */ }
  7. ::-webkit-resizer                { /* 7 */ }
复制代码
::-webkit-scrollbar                      滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
::-webkit-scrollbar-button           滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track             外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece   内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb           滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner           边角
::-webkit-resizer                         定义右下角拖动块的样式



注意:

对以上各个部分定义width,height时。有如下功能:若是水平滚动条,则width属性不起作用,height属性用来控制滚动条相应部分竖直方向高度;若是竖直滚动条,则height属性不起作用,width属性用来控制相应部分的宽度。

能过上面的不断的测试。在Chrome中,滚动条中的各个部分和DOM中块级元素是一样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。而{}中的属性,你就像控制一般块级元素一样简单(强大啊)。


:horizontal horizontal      伪类,主要应用于选择水平方向滚动条。
:vertical vertical              伪类主要是应用于选择竖直方向滚动条
:decrement decrement   伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
:increment increment     伪类与和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
:start                                start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end                                类似于start伪类,标识对象是否放到滑块的后面。
:double-button                该伪类可以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
:single-button                  类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
:no-button                        用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。
:corner-present                用于所有滚动条轨道,指示滚动条圆角是否显示。
:window-inactive              用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
另外,:enabled、:disabled、:hover、和:active等伪类同样在滚动条中适用。

给大家丢一段代码,复制出来看看样式;

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style>
  7.     body{
  8.       scrollbar-arrow-color: red; /*上下按钮上三角箭头的颜色*/
  9.       scrollbar-face-color: #CBCBCB; /*滚动条凸出部分的颜色*/
  10.       scrollbar-3dlight-color: blue; /*滚动条亮边的颜色*/
  11.       scrollbar-highlight-color: #333; /*滚动条空白部分的颜色*/
  12.       scrollbar-shadow-color: #54ff45; /*滚动条阴影的颜色*/
  13.       scrollbar-darkshadow-color: green; /*滚动条强阴影的颜色*/
  14.       scrollbar-track-color: #eee; /*滚动条背景颜色*/

  15.       scrollbar-base-color: #ff68b5; /*滚动条的基本颜色*/
  16.       /*Cursor:url(mouse.cur); /!*自定义个性鼠标*!/*/
  17.       /*以上2项适用与:body、div、textarea、iframe*/
  18.     }


  19.     ::-webkit-scrollbar {  /* 滚动条整体部分 */
  20.       width:10px;
  21.       margin-right:2px
  22.     }
  23.     ::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
  24.       width:10px;
  25.       background-color: yellow;
  26.     }
  27.     ::-webkit-scrollbar:horizontal {
  28.       height:10px;
  29.       margin-bottom:2px
  30.     }
  31.     ::-webkit-scrollbar-track {  /* 外层轨道 */
  32.       border-radius: 10px;
  33.     }
  34.     ::-webkit-scrollbar-track-piece {  /*内层轨道,滚动条中间部分 */
  35.       background-color: #333333;
  36.       border-radius: 10px;
  37.     }
  38.     ::-webkit-scrollbar-thumb {  /* 滑块 */
  39.       width:10px;
  40.       border-radius: 5px;
  41.       background: #CBCBCB;
  42.     }
  43.     ::-webkit-scrollbar-corner { /* 边角 */
  44.       width: 10px;
  45.       background-color: red;
  46.     }
  47.     ::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
  48.       background: #ff68b5;
  49.     }
  50.     .demo {
  51.       width: 400px;
  52.       height: 2000px;
  53.       overflow: auto;
  54.     }
  55.       
  56.   </style>
  57. </head>
  58. <body>
  59. <div class="demo">

  60.   <ul style="width: 600px;">
  61.     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam amet consequatur possimus voluptate. Consectetur cumque, illum itaque odio quaerat quibusdam sunt? A, architecto commodi cumque cupiditate deserunt distinctio eos expedita facere incidunt ipsam iure labore libero magni mollitia necessitatibus nemo nesciunt officiis optio placeat porro provident quidem quisquam quod repellat sed sint sunt suscipit temporibus tenetur voluptate! Deleniti deserunt dolor doloremque est et id iste magni minus nihil nisi nulla officiis placeat, reiciendis sed sit, tempora vero. Deserunt est impedit in laudantium natus, nihil, odit officia optio quaerat quo rem tempore unde vero, vitae voluptas voluptate voluptates? Accusantium alias amet, cupiditate dolorem doloremque ducimus et ex fugit, illo inventore ipsa iure laborum modi molestias necessitatibus nostrum odio officia omnis quia quibusdam veniam voluptates voluptatum? Adipisci amet, doloribus ducimus eaque exercitationem fugit laboriosam modi optio, quidem quis, totam voluptas voluptatibus. Adipisci dolor dolorem ea eum explicabo, facilis harum magnam nam neque, non officia optio possimus, quae temporibus voluptatibus? Ab cum cupiditate dolor dolores dolorum eius esse eum harum ipsa, iusto magnam magni maiores minima minus nisi perferendis quas quibusdam quidem reprehenderit rerum, sapiente sed sequi similique tempora totam vel veritatis? Ea eaque earum est eum modi nemo rem voluptate. Perspiciatis.</li>
  62.     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam amet consequatur possimus voluptate. Consectetur cumque, illum itaque odio quaerat quibusdam sunt? A, architecto commodi cumque cupiditate deserunt distinctio eos expedita facere incidunt ipsam iure labore libero magni mollitia necessitatibus nemo nesciunt officiis optio placeat porro provident quidem quisquam quod repellat sed sint sunt suscipit temporibus tenetur voluptate! Deleniti deserunt dolor doloremque est et id iste magni minus nihil nisi nulla officiis placeat, reiciendis sed sit, tempora vero. Deserunt est impedit in laudantium natus, nihil, odit officia optio quaerat quo rem tempore unde vero, vitae voluptas voluptate voluptates? Accusantium alias amet, cupiditate dolorem doloremque ducimus et ex fugit, illo inventore ipsa iure laborum modi molestias necessitatibus nostrum odio officia omnis quia quibusdam veniam voluptates voluptatum? Adipisci amet, doloribus ducimus eaque exercitationem fugit laboriosam modi optio, quidem quis, totam voluptas voluptatibus. Adipisci dolor dolorem ea eum explicabo, facilis harum magnam nam neque, non officia optio possimus, quae temporibus voluptatibus? Ab cum cupiditate dolor dolores dolorum eius esse eum harum ipsa, iusto magnam magni maiores minima minus nisi perferendis quas quibusdam quidem reprehenderit rerum, sapiente sed sequi similique tempora totam vel veritatis? Ea eaque earum est eum modi nemo rem voluptate. Perspiciatis.</li>
  63.   </ul>
  64. </div>
  65. </body>
  66. </html>
复制代码




 

精彩评论1

正序浏览
老蚊子 发表于 2018-11-21 08:45:44 | 显示全部楼层
 
IE也有不错的兼容性,可以试一下.
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

11粉丝

37帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )