02.09 選項卡 及自定義滾動條

 /*定義滾動條寬高及背景，寬高分別對應橫豎滾動條的尺寸*/
        .scrollbar::-webkit-scrollbar
        {
            width: 10px;
            height: 16px;
            background-color: #f5f5f5;
            border-radius: 10px;
        }
        /*定義滾動條的軌道，內陰影及圓角*/
        .scrollbar::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            border-radius: 10px;
            background-color: #004882;
        }
        /*定義滑塊，內陰影及圓角*/
        .scrollbar::-webkit-scrollbar-thumb
        {
            /*width: 10px;*/
            height: 20px;
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #1875D8;
        }
        #tablelist ul.tab-hd li:last-child, .bar4map .scTab li:last-child
        {
            -moz-border-top-right-radius: 3px;
            -o-border-top-right-radius: 3px;
            -webkit-border-top-right-radius: 3px;
            border-top-right-radius: 3px;
            -moz-border-bottom-right-radius: 3px;
            -o-border-bottom-right-radius: 3px;
            -webkit-border-bottom-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }
        #tablelist ul.tab-hd li:first-child, .bar4map .scTab li:first-child
        {
            -moz-border-top-left-radius: 3px;
            -o-border-top-left-radius: 3px;
            -webkit-border-top-left-radius: 3px;
            border-top-left-radius: 3px;
            -moz-border-bottom-left-radius: 3px;
            -o-border-bottom-left-radius: 3px;
            -webkit-border-bottom-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        .bar4map .scTab li
        {
            /*float: left;*/
            display: inline-block;
            height: 25px;
            line-height: 26px;
            width: 70px;
            margin-right: -1px;
            text-align: center;
            color: #ddd;
            border: 1px solid #1f74f2;
        }
        .bar4map .scTab li.curr
        {
            background: #1f74f2;
            color: #fff;
        }

Html結構

<div class="bar4map" id="auto_gsid_19">
        <ul class="scTab" id="scTab">
            <li class="scLi curr" tabval="3" onclick="change(3)">第三批</li>
            <li class="scLi" tabval="4" onclick="change(4)">第四批</li>
            <li class="scLi" tabval="5" onclick="change(5)">第五批</li>
       </ul>
</div>

參考

http://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html