谷歌滚动条样式的修改

之前在做项目的时候遇到了一个问题,当时因为我们做的项目是要对谷歌的滚动条进行再定义的,但是分配到我的那个页面的时候是需要对滚动条进行再次还原的(滚动条的样式一旦修改了之后,他原有的样式就不存在了,所以所有的样式就必须重新修改),也就是将滚动条再重新设置回原有的样子,在网上找了很久,之后再一篇文章中找到了一些很不错的方法,下面分享给大家。
这是原文的链接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);
                          }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,506评论 25 708
  • 在此特此声明:一下所有链接均来自互联网,在此记录下我的查阅学习历程,感谢各位原创作者的无私奉献 ! 技术一点一点积...
    远航的移动开发历程阅读 11,234评论 12 197
  • 一个人可以走的很快,一个团队可以走的很远。
    肖恩2017阅读 136评论 0 0
  • 在夏末,初秋,这个有着那么一点点伤感的又尴尬的季节里,我种了三朵百合。 第一次养植物,害怕长不好,一天要观察很多次...
    晓晓的张阅读 265评论 0 0
  • 参不参加由你定,有啥意见跟我说。 若是心打退堂鼓,恶魔都在鄙视你。 身体不适也可以,下次你来我欢迎! 要是想来给我...
    刘婧_阅读 257评论 5 17