自定义滚动条demo 

<html>
<head>
    <title></title>
    <style type="text/css">
        .test {
            width: 500px;
            height: 300px;
            border:1px solid #ededed;
            overflow: scroll;
        }
::-webkit-scrollbar/*整体部分*/
{
width: 10px;
height: 0
}

::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: #fff;
}

::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #c3c3c3;
}

::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
/*border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);*/
}
    </style>
</head>
<body>
    <div class="test">
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>
                    /* Let's get this party started */
        ::-webkit-scrollbar {
            width: 12px;
        }
         
        /* Track */
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px #f6f6f6; 
            /*-webkit-border-radius: 10px;*/
            border-radius: 10px;
        }
        ::-webkit-scrollbar-track-piece {

        }
         
        /* Handle */
        ::-webkit-scrollbar-thumb {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: #c3c3c3; 
            /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
        }
        </p>    
    </div>
</body>
</html>

 

posted @ 2015-06-03 22:58  chenqiushi909  阅读(284)  评论(0)    收藏  举报