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>

    效果图:

  • 相关阅读:
    [原创]c#快速排序类 Virus
    [原创]关系,依赖, Virus
    [原创]外包 Virus
    [原创]异步调用I/O方法的使用 Virus
    [原创]一个查找并且替换的算法 Virus
    封装原来的DirectoryInfo类,添加事件,可以代替FileSystemWatcher 类 Virus
    [原创]包头人在北京<一> Virus
    [原创]异步调用,多线程,委托 Virus
    [原创]异步,跨线程,非阻塞,DNS,Socket Virus
    [原创]大家动脑吧,一个面试题 Virus
  • 原文地址:https://www.cnblogs.com/heyiming/p/6841419.html
Copyright © 2011-2022 走看看