更改浏览器的滚动条样式

2017-10-03

看到了一个很个性的滚动条式，打开Chrome的调试工具看了一下，发现不是用JavaScript来模拟实现的，觉得有必要折腾一下。于是在各大浏览器中对比了一下，发现只用Chrome适用，也就是说这个用的是Chrome的私有CSS属性

body{
          scrollbar-arrow-color: red; /*上下按钮上三角箭头的颜色*/
          scrollbar-face-color: #CBCBCB; /*滚动条凸出部分的颜色*/
          scrollbar-3dlight-color: blue; /*滚动条亮边的颜色*/
          scrollbar-highlight-color: #333; /*滚动条空白部分的颜色*/
          scrollbar-shadow-color: yellow; /*滚动条阴影的颜色*/
          scrollbar-darkshadow-color: green; /*滚动条强阴影的颜色*/
          scrollbar-track-color: #eee; /*滚动条背景颜色*/
 
          scrollbar-base-color: black; /*滚动条的基本颜色*/
          Cursor:url(mouse.cur); /*自定义个性鼠标*/
          /*以上2项适用与：body、div、textarea、iframe*/
      }
 
 
      ::-webkit-scrollbar {  /* 滚动条整体部分 */
          width:10px;
          margin-right:2px
      }
      ::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
          width:10px;
          background-color: yellow;
      }
      ::-webkit-scrollbar:horizontal {
          height:10px;
          margin-bottom:2px
      }
      ::-webkit-scrollbar-track {  /* 外层轨道 */
          border-radius: 10px;
      }
      ::-webkit-scrollbar-track-piece {  /*内层轨道，滚动条中间部分 */
          background-color: #333333;
          border-radius: 10px;
      }
      ::-webkit-scrollbar-thumb {  /* 滑块 */
          width:10px;
          border-radius: 5px;
          background: #CBCBCB;
      }
      ::-webkit-scrollbar-corner { /* 边角 */
          width: 10px;
          background-color: red;
      }
      ::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
          background: #909090;
      }
      .demo {
          width: 400px;
          height: 200px;
          overflow: auto;
      }

<div class="demo">
 
        <ul style="width: 600px;">
            <li>
                2011年2月17日，互联网实验室在北京发布《互联网研究调查报告》，该报告中指出我国互联网产业已出现寡头垄断现象，腾讯、百度和阿里巴巴三家公司在其各自领域位居中国互联网垄断企业前三名。 各大媒体于是将这家公司称为三巨头，之后逐渐演变成BAT。
 
                虽然都是三巨头，但是差距却在不断扩大。目前（8月19日），腾讯的市值已达到2490亿美元，高于阿里的2460亿美元，成为中国市值最高的科技公司。然而百度才刚刚608亿美元，与阿里和腾讯相去甚远。
 
                不仅BAT之间的差距在扩大，很多互联网公司也追赶了上来。之前落后，但是如今形势大好的网易，还有京东、小米、乐视、滴滴出行等等。到底谁有可能成为中国互联网的第四极呢？
            </li>
            <li>
                2011年2月17日，互联网实验室在北京发布《互联网研究调查报告》，该报告中指出我国互联网产业已出现寡头垄断现象，腾讯、百度和阿里巴巴三家公司在其各自领域位居中国互联网垄断企业前三名。 各大媒体于是将这家公司称为三巨头，之后逐渐演变成BAT。
 
                虽然都是三巨头，但是差距却在不断扩大。目前（8月19日），腾讯的市值已达到2490亿美元，高于阿里的2460亿美元，成为中国市值最高的科技公司。然而百度才刚刚608亿美元，与阿里和腾讯相去甚远。
 
                不仅BAT之间的差距在扩大，很多互联网公司也追赶了上来。之前落后，但是如今形势大好的网易，还有京东、小米、乐视、滴滴出行等等。到底谁有可能成为中国互联网的第四极呢？
            </li>
            <li>
                2011年2月17日，互联网实验室在北京发布《互联网研究调查报告》，该报告中指出我国互联网产业已出现寡头垄断现象，腾讯、百度和阿里巴巴三家公司在其各自领域位居中国互联网垄断企业前三名。 各大媒体于是将这家公司称为三巨头，之后逐渐演变成BAT。
 
                虽然都是三巨头，但是差距却在不断扩大。目前（8月19日），腾讯的市值已达到2490亿美元，高于阿里的2460亿美元，成为中国市值最高的科技公司。然而百度才刚刚608亿美元，与阿里和腾讯相去甚远。
 
                不仅BAT之间的差距在扩大，很多互联网公司也追赶了上来。之前落后，但是如今形势大好的网易，还有京东、小米、乐视、滴滴出行等等。到底谁有可能成为中国互联网的第四极呢？
            </li>
            <li>
                2011年2月17日，互联网实验室在北京发布《互联网研究调查报告》，该报告中指出我国互联网产业已出现寡头垄断现象，腾讯、百度和阿里巴巴三家公司在其各自领域位居中国互联网垄断企业前三名。 各大媒体于是将这家公司称为三巨头，之后逐渐演变成BAT。
 
                虽然都是三巨头，但是差距却在不断扩大。目前（8月19日），腾讯的市值已达到2490亿美元，高于阿里的2460亿美元，成为中国市值最高的科技公司。然而百度才刚刚608亿美元，与阿里和腾讯相去甚远。
 
                不仅BAT之间的差距在扩大，很多互联网公司也追赶了上来。之前落后，但是如今形势大好的网易，还有京东、小米、乐视、滴滴出行等等。到底谁有可能成为中国互联网的第四极呢？
            </li>
            <li>
                2011年2月17日，互联网实验室在北京发布《互联网研究调查报告》，该报告中指出我国互联网产业已出现寡头垄断现象，腾讯、百度和阿里巴巴三家公司在其各自领域位居中国互联网垄断企业前三名。 各大媒体于是将这家公司称为三巨头，之后逐渐演变成BAT。
 
                虽然都是三巨头，但是差距却在不断扩大。目前（8月19日），腾讯的市值已达到2490亿美元，高于阿里的2460亿美元，成为中国市值最高的科技公司。然而百度才刚刚608亿美元，与阿里和腾讯相去甚远。
 
                不仅BAT之间的差距在扩大，很多互联网公司也追赶了上来。之前落后，但是如今形势大好的网易，还有京东、小米、乐视、滴滴出行等等。到底谁有可能成为中国互联网的第四极呢？
            </li>
        </ul>
    </div>

效果图：

本博客滚动条样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 10px;
	height: 10px;
}

::-webkit-scrollbar-button {
	width: 0;
	height: 0;
}

::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
	display: none;
}

::-webkit-scrollbar-corner {
	display: block;
}

::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background-color: rgba(0,0,0,.2);
}

::-webkit-scrollbar-thumb:hover {
	border-radius: 8px;
	background-color: rgba(0,0,0,.5);
}

::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
}

::-webkit-scrollbar-track:hover {
	background-color: rgba(0,0,0,.15);
}
::-webkit-scrollbar-button:start {
	width: 10px;
	height: 10px;
	background: url(https://gitlwz.github.io/assets/blogImg/css-scrollbar/scrollbar_arrow.png) no-repeat 0 0;
}

::-webkit-scrollbar-button:start:hover {
	background: url(https://gitlwz.github.io/assets/blogImg/css-scrollbar/scrollbar_arrow.png) no-repeat -15px 0;
}

::-webkit-scrollbar-button:start:active {
	background: url(https://gitlwz.github.io/assets/blogImg/css-scrollbar/scrollbar_arrow.png) no-repeat -30px 0;
}

::-webkit-scrollbar-button:end {
	width: 10px;
	height: 10px;
	background: url(https://gitlwz.github.io/assets/blogImg/css-scrollbar/scrollbar_arrow.png) no-repeat 0 -18px;
}

::-webkit-scrollbar-button:end:hover {
	background: url(https://gitlwz.github.io/assets/blogImg/css-scrollbar/scrollbar_arrow.png) no-repeat -15px -18px;
}

::-webkit-scrollbar-button:end:active {
	background: url(https://gitlwz.github.io/assets/blogImg/css-scrollbar/scrollbar_arrow.png) no-repeat -30px -18px;
}