Jquery實現自定義滾動條，DIV滑動效果

瀏覽器自帶的滾動條一般都不符合我們的需求（因爲不好看，太醜，還不能改！），網上搜了一下，發現有很多用js或者jquery實現的自定義的滾動條，而且樣式都很漂亮。比如說這個： http://manos.malihu.gr/jquery-custom-content-scroller/ 裏面有很多很多很漂亮的滾動條的example。

言歸正傳，既然都有了直接拿來用不就好了麼！個人拿來隨便用啊，但是你要是使用到工作上，考慮的東西就比較多了。所以就自己倒騰倒騰，研究了下他的變化，其實就是自己重新定義一個滾動條樣式，然後通過改變標籤的top值來實現滾動變化。

這樣一想是不是就簡單多了！嗯，你只需要瞭解一點css，一點html，一點jquery中的mousedown、mousemove、mouseup、animate、onmousewheel、hover知識就可以了。下面開始上代碼，css的話就不整理出來了，也可以通過上面的連接去下載css文件。

Html代碼：

<html>
<head>
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <link rel="stylesheet" href="jquery.mCustomScrollbar.css">
    <style type="text/css">

    </style>
</head>
<body align="center">
<div id="demo">
    event.pageXY: <span id="eventpageXY" ></span>
        <section id="examples" style="margin: auto;width: 800px;">  
            <div id="content-1" class="content mCustomScrollbar _mCS_1 mCS-autoHide">
             <div id="mCSB_1" class="mCustomScrollBox mCS-rounded mCSB_vertical mCSB_inside" style="max-height: none;" tabindex="0">
                    <div id="mCSB_1_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px;" dir="ltr">
                        <h2>Content</h2>
                        <hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
ratione voluptatem sequi nesciunt.</p> 
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam 
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> 
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui 
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p> 
omnis voluptas assumenda est, omnis dolor repellendus.</p> 
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae 
maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos 
qui ratione voluptatem sequi nesciunt.</p> 
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum 
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> 
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque 
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p> 
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere 
possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p> 
sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis 
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
                        <hr>
                        <p>End of content.</p>
                    </div>
style="display: block;">
                        <div class="mCSB_draggerContainer">
                            <div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 14px; 
                            top: 0px; display: block;">
                                <div class="mCSB_dragger_bar"></div>
                            </div>
                            <div class="mCSB_draggerRail"></div>
                        </div>
                    </div>
                </div>
            </div>          
        </section>
    </div>  
</body>
</html>

Jquery代碼：

    <script type="text/javascript">
        var toButtom = toTop = ynew = y = 0;
        var isFinish = true;
        var hoverDiv = true;
        var divHeight = $("#mCSB_1").height();
        $(document).ready(function(){
          $(document).mousemove(function(e){ 
            $("#eventpageXY").text("X: " + e.pageX + ", Y: " + e.pageY); 
          });
        });
        //拖動事件
        var topChange = 0;
        var contentDiv = $("#mCSB_1_container");                   
        var objDiv = $("#mCSB_1_scrollbar_vertical");
        var obj = $('#mCSB_1_dragger_vertical');   
        var offsettop = obj.offset().top;
        var contentOffsettop = contentDiv.offset().top;
        var objHeight = obj.height();
        var objDivHeight = objDiv.height();
        var contentHeight = contentDiv.height();
        $(function(){
            $('#mCSB_1_dragger_vertical').mousedown(function (event) {     
                var isMove = true; 
                $(document).mousemove(function (event) {  
                    event.preventDefault();
                        if (isMove) {
                            var oldTop = parseInt(obj.css("top"));
                            if(oldTop < 0)
                            {
                                obj.css('top',0);
                                contentDiv.css("top",0);
                                return;
                            }
                            if(oldTop > objDivHeight - objHeight){
                                obj.css('top',objDivHeight - objHeight);
                                contentDiv.css("top","-" + (contentHeight - objDivHeight));
                                return;
                            }
                            if(oldTop >= 0 && oldTop <= (objDivHeight - objHeight)){
                                if((event.pageY -offsettop -5) < 0 )
                                {
                                    obj.css('top',0);
                                    contentDiv.css("top",0);
                                    return;
                                }
                                if((event.pageY -offsettop -5) > (objDivHeight - objHeight))
                                {
                                    obj.css('top',objDivHeight - objHeight);
                                    contentDiv.css("top","-" + (contentHeight - objDivHeight));
                                    return;                                 
                                }
                                obj.css('top',event.pageY -offsettop -5); 
                                var newTop = parseInt(obj.css("top"));
                                topChange = oldTop - newTop;
                                var divNewTop = parseInt(contentDiv.css("top")) + topChange*(contentHeight/objDivHeight);
                                contentDiv.css("top",divNewTop);
                            }
                        }  
                    }  
                ).mouseup(function () {  
                            isMove = false;  
                }); 
            }); 
        }); 
        //滾輪下滑,內容上滑，top遞減
        function upContent(){
            var oldTop = parseInt(contentDiv.css("top"));
            var olTopScrol = parseInt(obj.css("top"));
            var srcDivNewTop = oldTop - divHeight;
            if(oldTop > 0){
                contentDiv.animate(
                    {top:'-=' + oldTop + 'px'},
                    "normal",
                    "linear",
                    function(){
                        isFinish = true;
                    }
                );
                obj.animate(
                    {top:'-=' + olTopScrol +'px'},
                    "normal",
                    "linear",
                    function(){
                        isFinish = true;
                    }
                );
                return;
            }else
            {
                if(srcDivNewTop < (objDivHeight - contentHeight))
                {
                    if(oldTop == (objDivHeight - contentHeight))
                    {
                        isFinish = true;
                        return;
                    }
                    contentDiv.animate(
                        {top:'-=' + ((contentHeight- objDivHeight) + oldTop) + 'px'},
                        "normal",
                        "linear",
                        function(){
                            isFinish = true;
                        }
                    );
                    obj.animate(
                        {top:'+=' + (divHeight - objHeight - olTopScrol) +'px'},
                        "normal",
                        "linear",
                        function(){
                            isFinish = true;
                        }
                    );
                    return;
                }
                contentDiv.animate(
                    {top:'-=' + divHeight + 'px'},
                    "normal",
                    "linear",
                    function(){
                        isFinish = true;
                    }
                );
                obj.animate(
                    {top:'+=' + (divHeight*divHeight/contentHeight) +'px'},
                    "normal",
                    "linear",
                    function(){
                        isFinish = true;
                    }
                );
            }   
        }
        //滾輪上滑,內容下滑，top遞增
        function downContent(){
            var oldTop = parseInt(contentDiv.css("top"));   
            var olTopScrol = parseInt(obj.css("top"));
            var srcDivNewTop = oldTop + divHeight;
            if(oldTop >= 0){
                contentDiv.animate(
                    {top:'-=' + oldTop + 'px'},
                    "normal",
                    "linear",
                    function(){
                        isFinish = true;
                    }
                );
                obj.animate({
                    top:'-=' + olTopScrol +'px'},
                    "normal",
                    "linear",
                    function(){
                        isFinish = true;
                    }
                );
                return;
            }else
            {
                if(srcDivNewTop > 0){
                    contentDiv.animate(
                        {top:'-=' + oldTop + 'px'},
                        "normal",
                        "linear",
                        function(){
                            isFinish = true;
                        }
                    );
                    obj.animate(
                        {top:'-=' + olTopScrol +'px'},
                        "normal",
                        "linear",
                        function(){
                            isFinish = true;
                        }
                    );
                    return;
                };
                contentDiv.animate(
                    {top:'+=' + divHeight + 'px'},
                    "normal",
                    "linear",
                    function(){
                        isFinish = true;
                    }
                );
                obj.animate(
                    {top:'-=' + (divHeight*divHeight/contentHeight) +'px'},
                    "normal",
                    "linear",
                    function(){
                        isFinish = true;
                    }
                );
            }
        }

        function mainFunc(){
            if(isFinish)
            {
                isFinish = false;           
                //滾輪下滑,內容上滑，top遞減
                if(e.wheelDelta/-120 > 0){
                    upContent();
                }
                //滾輪上滑,內容下滑，top遞增
                if(e.wheelDelta/120 > 0){
                    downContent();
                }
            }
        }

        $("#content-1").hover(function(){
            hoverDiv = true;
        },function(){
            hoverDiv = false;
        });         
        //鼠標滾輪事件
        document.onmousewheel = function(e) {
            if(isFinish && hoverDiv)
            {
                isFinish = false;           
                //滾輪下滑,內容上滑，top遞減
                if(e.wheelDelta/-120 > 0){
                    upContent();
                }
                //滾輪上滑,內容下滑，top遞增
                if(e.wheelDelta/120 > 0){
                    downContent();
                }
            }           
        };
    </script>

Jquery實現自定義滾動條，DIV滑動效果

這樣一想是不是就簡單多了！嗯，你只需要瞭解一點css，一點html，一點jquery中的mousedown、mousemove、mouseup、animate、onmousewheel、hover知識就可以了。下面開始上代碼，css的話就不整理出來了，也可以通過上面的連接去下載css文件。

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

Jquery電話號碼的驗證

彈出層，遮罩層，浮層菜單

js 利用canvas標籤畫一個存儲按鈕（附加svg動態按鈕）

SQL新建存儲過程的入門級方法

JQuery中attr方法和prop方法的區別

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結