当前位置:编程学习 > JAVA >>

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]
<div 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.zzzyk.com  
    <br /> 
    阿斯蒂芬多个地方营业总收入:11.66亿元(同比增长-1.75%) 
    <br /> 
    净利润:0.19亿元(同比增长23.72%) 
   

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,