封装自定义滚动条

function autoRoll(id,hh){

var obj = $('#'+ id)
//结构格式化
var obj_heights;
if(arguments.length>1){
    obj_heights = hh;
    }else{
    obj_heights = obj.height();
    }
console.log(obj_heights)
var objcontent  = '';
    objcontent += '<div class="rollbox" style="height:' + obj_heights + 'px;' + 'width:' + obj.width() + 'px;">';
    objcontent +=     '<div class="rollcon" style="height:' + obj_heights + 'px;' + 'width:' + parseInt(obj.width()+24) + 'px;">';
    objcontent +=     '<div class="rollconadd" style="width:' + parseInt(obj.width()-20) + 'px;">';
    objcontent +=      obj.html();
    objcontent +=     '</div>';
    objcontent +=     '</div>';
    objcontent +=     '<div class="rollsign" style="height:' + obj_heights + 'px;">';
    objcontent +=     '<div class="rollsignobj"></div>';
    objcontent +=     '</div>';    
    objcontent += '</div>';
obj.html(objcontent)
//

myboxroll(obj.find(".rollcon"),obj.find(".rollconadd"))
signroll(obj.find(".rollcon"),obj.find(".rollconadd"))
mouseroll(obj.find(".rollcon"),obj.find(".rollconadd"),document.getElementById(id))
}
//==============================================
function myboxroll(winbox,wincon){
    var sign_top = winbox.scrollTop()*(winbox.height()/wincon.height())
    winbox.parent().find(".rollsignobj").css("top",sign_top +'px')
    winbox.scroll(function(){
        sign_top = winbox.scrollTop()*(winbox.height()/wincon.height())
        //滚标赋top
        winbox.parent().find(".rollsignobj").css("top",sign_top +'px')
    
    })
}

///
//sign滚标函数
function signroll(winbox,wincon){
//
    
    if(wincon.height()<=winbox.height()){
        winbox.parent().find(".rollsign").hide()        
    }else{
        winbox.parent().find(".rollsign").show()        
    }
    var sign_h = parseInt(winbox.height()/wincon.height() * winbox.height());
    
    var win_h = winbox.height();
    var rolly

    //var sign_h = $(".myboxcon").height()/$(".mycon").height() * $(".myboxcon").height()
    winbox.parent().find(".rollsign").height(win_h)
    winbox.parent().find(".rollsignobj").height(sign_h)

//
    winbox.parent().find(".rollsign").mousedown(function(ev){
        
        var parenty = ev.pageY;
        
        var objtop = winbox.scrollTop()*(winbox.height()/wincon.height())
        
        
        //
        $(document).mousemove(function(e){

            rolly = e.pageY - parenty + objtop
            if( rolly > 0 && rolly < (win_h-sign_h)){
                winbox.parent().find(".rollsignobj").css("top",rolly)
                winbox.parent().find(".rollcon").scrollTop(rolly*(wincon.height()/winbox.height()))            
            }
            if( rolly < 0){
                winbox.parent().find(".rollsignobj").css("top",0)
                winbox.parent().find(".rollcon").scrollTop(0)
            }
            if(rolly > (win_h-sign_h)){
                winbox.parent().find(".rollsignobj").css("top",win_h-sign_h)
                winbox.parent().find(".rollcon").scrollTop((win_h-sign_h)*(wincon.height()/winbox.height()))            
            }
            
        })
        //
        
    
    })
//
    $("html").mouseup(function(){
    
        $(document).unbind();
        
        
    })
//如果鼠标滑出窗口停止事件
//    $("html").mouseout(function(){
//    
//        $(document).unbind();
//        
//        
//    })
//
}
///
var sign_topwheel
function myboxrollwheel(winbox,wincon,num){
     winbox.scrollTop(winbox.scrollTop()+num)
     sign_topwheel = winbox.scrollTop()*(winbox.height()/wincon.height())

        //滚标赋top
        winbox.parent().find(".rollsignobj").css("top",sign_topwheel +'px')
    
    
}
//滚轮事件

function mouseroll(winbox,wincon,objroll){
//mousewheel事件区别下firefox
if(window.navigator.userAgent.indexOf("Firefox") != -1){
    objroll.addEventListener("DOMMouseScroll", function(event) {
        //console.dir(event);    
        //console.log(event.detail)
    //下滚值3
            if(event.detail == 3){
            myboxrollwheel(winbox,wincon,20)
            }
    //上滚值-3
            if(event.detail == -3){
            myboxrollwheel(winbox,wincon,-20)
            }
    });    
    
}else{
    objroll.onmousewheel = function(event){
        event = event || window.event;
        //console.dir(event);    
        //console.log(event.wheelDelta)
    //下滚值-120
            if(event.wheelDelta == -120){
            myboxrollwheel(winbox,wincon,20)
            }
    //上滚值120
            if(event.wheelDelta == 120){
            myboxrollwheel(winbox,wincon,-20)
            }
        
    };    
    
}

}

------------------------------------------------

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.skdesigner-floatrollnonetext,body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body{margin:0;padding:0;font-family:"微软雅黑";}
ul,li{margin:0;padding:0;list-style-type:none;}
img{border:0;}
a{text-decoration:none;}

.mybox{background:green;height:90%;width:400px;}
.againmybox{background:yellow;height:400px;width:300px;}

.rollbox{position:relative;overflow:hidden;}
.rollbox .rollcon{overflow:auto;overflow-x:hidden;}
.rollbox .rollsign{position:absolute;top:0;right:0;width:20px;}
.rollbox .rollsignobj{position:absolute;width:12px;height:50px;background:red;}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

</head>

<body>

<div class="againmybox" id="skcontent3">
111111111111123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>3333333333333

</div>

<div class="mybox" id="skcontent">
111111111111123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>12307777777777777777

</div>

<div class="againmybox" id="skcontent2">
111111111111123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>1230<br>
123<br>1234<br>1235<br>1236<br>1237<br>1238<br>1239<br>2222222222222

</div>

<script type="text/javascript" src="js/autoRoll.js"></script>
<script type="text/javascript">

autoRoll('skcontent')
autoRoll('skcontent2')
autoRoll('skcontent3')
</script>
</body>
</html>
 

转载于:https://my.oschina.net/wglookk/blog/789663