谷歌滚动条样式的修改

之前在做项目的时候遇到了一个问题，当时因为我们做的项目是要对谷歌的滚动条进行再定义的，但是分配到我的那个页面的时候是需要对滚动条进行再次还原的（滚动条的样式一旦修改了之后，他原有的样式就不存在了，所以所有的样式就必须重新修改），也就是将滚动条再重新设置回原有的样子，在网上找了很久，之后再一篇文章中找到了一些很不错的方法，下面分享给大家。
这是原文的链接blog.csdn.net/hanshileiai/article/details/40398177;

           这部分是对整个滚动条样式的整体部分，颜色是背景色
         ::-webkit-scrollbar {
        width: 16px;
        height: 16px;
        background-color: #ddd;
    }
     
    ::-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-thumb {
                              height:100px;
                                      border-radius: 0%;
                                    -webkit-box-shadow:  0 0 0 rgba(0, 0, 0, 0);
                                        background-color: #C1C1C1;
                                  }
                    ::-webkit-scrollbar-thumb:hover {
                    height:100px;
                                border-radius: 0%;
                                    -webkit-box-shadow:  0 0 0 rgba(0, 0, 0, 0);
                                    background-color: #A8A8A8;
                                }
      这里用这种背景图片的方式是他的上下两部f分可以变成谷歌滚动条的样式，图片可以自己截图。
                              ::-webkit-scrollbar-button:end:increment {
                                  background-image: url(../../images/right.png);
                                            }
                                ::-webkit-scrollbar-button:start:decrement {
                                      background-image: url(../../images/left.png);
                          }