zoukankan      html  css  js  c++  java
  • 自定义样式的滚动条

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动条样式的自定义</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .scrollbar {
                /*margin-left: 30px;*/
                float: left;
                height: auto;
                width: 100%;
                background: #F5F5F5;
                /*overflow-y: scroll;*/
                /*margin-bottom: 25px;*/
            }
    
            .force-overflow {
                /*min-height: 450px;*/
            }
            #style-bar::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
                background-color: #F5F5F5;
                border-radius: 10px;
            }
    
            #style-bar::-webkit-scrollbar {
                width: 10px;
                background-color: #F5F5F5;
            }
    
            #style-bar::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background-color: #FFF;
                background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6,#54DE5D))
            }
        </style>
    </head>
    <body  class="scrollbar" id="style-bar">
        <div class="force-overflow"></div>
       <div><br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/>
            1 <br/><br/>
        </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    Java finally语句到底是在return之前还是之后执行?
    图文介绍openLDAP在windows上的安装配置
    ES之十:ElasticSearch监控工具 cerebro
    ES之八:ES数据库重建索引——Reindex(数据迁移)
    ES index的数据量大于1万的特殊处理场景
    Java中的Hashtable实现方法
    form表单回车提交问题(转)
    ES之九:ES Java客户端Elasticsearch Java client(ES Client 简介、Java REST Client、Java Client、Spring Data Elasticsearch)
    NetBeans 7.0 安装Python插件的方法
    python学习笔记
  • 原文地址:https://www.cnblogs.com/heyiming/p/6841419.html
Copyright © 2011-2022 走看看