JQuery+DIV自定義滾動條樣式

簡單思路：用DIV和DIV自身的滾動條相互控制內容的滾動，DIV自身的滾動條樣式可以用DIV層覆蓋，重寫滾動條樣式
JQuery計算滾動條長度和位置，代碼如下：
[javascript]
<script type="text/javascript"> 
    var scrMinHeight = 1; //滾動條最小高度 
    var scrMaxHeight = 0; //滾動條最大高度 
    var scrDefualtTop = 80; //滾動條默認位置 
    var scrHeight = 0; 
    //初始化滾動條 
    function InitScroll() { 
        scrMaxHeight = $("#mainScrollContent").height(); //文本框高度 
        scrHeight = document.getElementById("mainScrollContent").scrollHeight; //滾動文本高度 
        scrHeight = parseInt((scrMaxHeight / scrHeight) * scrMaxHeight); 
        if (scrHeight <= scrMinHeight) { scrHeight = scrMinHeight; } 
        if (scrHeight >= scrMaxHeight) { $("#scrollContent").hide(); } 
        else { 
            $("#scrollContent").show(); 
            $("#scrollContent .tiao_mid").css("height", (scrHeight – 19) + "px"); 
        } 
    } 
 
    $(document).ready(function () { 
        $(".bod").height(($(document).height() – 80) + "px"); 
        $("#mainScrollContent").height(($(document).height() – 125) + "px"); 
        scrMaxHeight = ($(document).height() – 125); //滾動條最大高度 
        $("#scrollBody").height(($(document).height() – 125) + "px"); 
        $("#scrollBodyBack").height(($(document).height() – 125) + "px"); 
 
        InitScroll(); 
        $("#mainScrollContent").scroll(function () { 
            ChangeScroll(); 
        }); 
        var y1 = 0; 
        $("#scrollContent").mousedown(function (event) { 
            var scrContentTop = $("#scrollContent").css("top"); 
            y1 = event.clientY – parseInt(scrContentTop.replace("px", "")); 
            $("#scrollContent").mousemove(function (event) { 
                if ((event.clientY – y1) < scrDefualtTop) { 
                    $("#scrollContent").css("top", scrDefualtTop + "px"); 
                } 
                else if ((event.clientY – y1) > (scrDefualtTop + scrMaxHeight – scrHeight)) { 
                    $("#scrollContent").css("top", (scrDefualtTop + scrMaxHeight – scrHeight) + "px"); 
                } 
                else { 
                    $("#scrollContent").css("top", (event.clientY – y1) + "px"); 
                } 
                ChangeScrollContent(); 
            }); 
        }).mouseup(function () { 
            $("#scrollContent").unbind("mousemove"); 
        }).mouseout(function () { 
            $("#scrollContent").unbind("mousemove"); 
        }); 
    }); 
 
    //改變滾動內容位置 
    function ChangeScrollContent() { 
        var scrTop = $("#scrollContent").css("top"); 
        var st = parseInt(scrTop.replace("px", "")); 
        st = ((st – scrDefualtTop) * document.getElementById("mainScrollContent").scrollHeight) / scrMaxHeight 
        $("#mainScrollContent").scrollTop(st); //滾動的高度 
    } 
 
    //改變滾動條位置 
    function ChangeScroll() { 
        var scrTop = $("#mainScrollContent").scrollTop(); //滾動的高度 
        scrTop = (scrTop * scrMaxHeight) / document.getElementById("mainScrollContent").scrollHeight + scrDefualtTop; 
        $("#scrollContent").css("top", scrTop + "px"); 
    } 
    </script> 
滾動區域內容DIV：
[html]
<p class="jtc_neir" id="Div1" style="height: 100px;"> 
    營業總收入:11.66億元(同比增長-1.75%) 
    <br /> 
    <a href="bank.aspx">dddd</a>凈利潤:0.19億元(同比增長23.72%) 
    <br /> 
    每股收益:0.04元 
    <br /> 
    凈資產收益率:1.58% 
    <br /> 
    毛利率:12.22%(同比增長39.89%) 
    <br /> 
    總資產:30.46億元(同比增長-7.14%)<br /> 
    as大蘇打撒旦撒 www.aiwalls.com  
    <br /> 
    阿斯蒂芬多個地方營業總收入:11.66億元(同比增長-1.75%) 
    <br /> 
    凈利潤:0.19億元(同比增長23.72%) 
    <br /> 
    每股收益:0.04元 
    <br /> 
    凈資產收益率:1.58% 
    <br /> 
    毛利率:12.22%(同比增長39.89%) 
    <br /> 
    總資產:30.46億元(同比增長-7.14%)<br /> 
    as大蘇打撒旦撒 
    <br /> 
    阿斯蒂芬多個地方營業總收入:11.66億元(同比增長-1.75%) 
    <br /> 
    凈利潤:0.19億元(同比增長23.72%) 
    <br /> 
    每股收益:0.04元 
    <br /> 
    凈資產收益率:1.58% 
    <br /> 
    毛利率:12.22%(同比增長39.89%) 
    <br /> 
    總資產:30.46億元(同比增長-7.14%)<br /> 
    as大蘇打撒旦撒 
    <br /> 
    阿斯蒂芬多個地方營業總收入:11.66億元(同比增長-1.75%) 
    <br /> 
    凈利潤:0.19億元(同比增長23.72%) 
    <br /> 
    每股收益:0.04元 
    <br /> 
    凈資產收益率:1.58% 
    <br /> 
    毛利率:12.22%(同比增長39.89%) 
    <br /> 
    總資產:30.46億元(同比增長-7.14%)<br /> 
    as大蘇打撒旦撒 
    <br /> 
    阿斯蒂芬多個地方營業總收入:11.66億元(同比增長-1.75%) 
    <br /> 
    凈利潤:0.19億元(同比增長23.72%) 
    <br /> 
    每股收益:0.04元 
    <br /> 
    凈資產收益率:1.58% 
    <br /> 
    毛利率:12.22%(同比增長39.89%) 
    <br /> 
    總資產:30.46億元(同比增長-7.14%)<br /> 
    as大蘇打撒旦撒 
    <br /> 
    阿斯蒂芬多個地方</p> 
<p class="jtc_tiao" style="background-color: rgb(196,206,208); z-index: 2;" id="Div2"> 
</p> 
<p class="jtc_tiao" style="background-color: rgb(222,222,222); z-index: 1; width: 16px;" 
    id="Div3"> 
</p> 
<p class="jtc_tiao" id="Div4"> 
    <p class="tiao_up"> 
    </p> 
    <p class="tiao_mid"> 
    </p> 
    <p class="tiao_bottom"> 
    </p> 
</p> 
主要樣式：
[css]
.jtc_neir{margin-left:20px; margin-right:20px; color:#000000; font-size:12px; background:none; line-height:32px; overflow-y:scroll;overflow-x:hidden; 
          scrollbar-3dlight-color:rgb(222,222,222); 
    scrollbar-arrow-color:rgb(222,222,222); 
    scrollbar-base-color:rgb(222,222,222); 
    scrollbar-darkshadow-color:rgb(222,222,222); 
    scrollbar-face-color:rgb(222,222,222); 
    scrollbar-highlight-color:rgb(222,222,222); 
    scrollbar-shadow-color:rgb(222,222,222);} 
     
.jtc_tiao{width:8px; position:absolute; top:80px; right:20px; z-index:10;} 
.tiao_up{width:8px; height:10px; background:url(../images/scrollbar-3.jpg) left top no-repeat; line-height:0px; overflow:hidden;} 
.tiao_mid{width:8px; background:url(../images/scrollbar-3.jpg) -39px center  repeat-y; line-height:0px; overflow:hidden;} 
.tiao_bottom{width:8px; height:10px; background:url(../images/scrollbar-3.jpg) -13px bottom no-repeat;font-size:0; line-height:0px; overflow:hidden;} 

摘自 tianyin的博客