谷歌浏览器——修改原生滚动条样式

 效果图:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .app{
        width: 265px;
        height: 400px;
        overflow-x: hidden;
        overflow-y: scroll;
        text-align: justify;
        padding:10px;
    }

    .app::-webkit-scrollbar {/*滚动条整体样式*/
        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
        background:#ebeef5;
        -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.2);
    }
    .app::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 3px;
        background: #409eff;
        height:120px;
    }
    .app::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 2px;
        background: rgba(0,0,0,0.1);
    }


    .app::-webkit-scrollbar {/*滚动条整体样式*/
        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
        background:#ebeef5;
        -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.2);
    }
    .app::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 3px;
        background: #409eff;
        height:120px;
    }
    .app::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 2px;
        background: rgba(0,0,0,0.1);
    }
/*这是ie浏览器隐藏滚动条的代码*/
       /* 
       div{
       	width:500px;
       	height:500px;
       	overflow: auto;
       	-ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
       }*/
    </style>
    
  </head>
  <body>
    <div class="app">
		前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,前端开发,
    </div>
    
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_41770018/article/details/81288795