自定义滚动条，借助系统滚动属性定位

最新推荐文章于 2024-10-10 09:56:47 发布

chungouzhui8919

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量104

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/wglookk/blog/735253

版权

<!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;overflow:auto;height:100%;width:100%;padding-right:30px;}
.mycon{background:yellow;width:90%;}
.myboxcon{overflow:hidden;width:100%;height:100%;}

.skdesigner-floatroll{height:500px;width:14px;background:red;position:absolute;right:0px;top:0;}
.skdesigner-floatroll-sign{width:8px;left:3px;border-radius:10px;height:50px;background:yellow;cursor:pointer;position:absolute;}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//
//窗口变动

$(window).resize(function(){

var win_h = document.documentElement.clientHeight
$(".mybox").height(win_h)

//盒子roll
myboxroll($(".mybox"),$(".mycon"))
//

/滚标
signroll($(".mybox"),$(".mycon"))
/

})
//
//加载完成
$(document).ready(function(){

var win_h = document.documentElement.clientHeight

$(".mybox").height(win_h)

//盒子roll
myboxroll($(".mybox"),$(".mycon"))
//

/滚标
signroll($(".mybox"),$(".mycon"))
/

//鼠标滚轮

//mouseroll($(".mybox"),$(".mycon"),document.getElementById("skdesigner_mybox"))
//
//
})
//

//sign滚标函数
function signroll(winbox,wincon){
//

   if(wincon.height()<winbox.height()){
       $(".skdesigner-floatroll").hide()
   }else{
       $(".skdesigner-floatroll").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()
   $(".skdesigner-floatroll").height(win_h)
   $(".skdesigner-floatroll-sign").height(sign_h)

//
   $(".skdesigner-floatroll").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)){
               $(".skdesigner-floatroll-sign").css("top",rolly)
               $(".mybox").scrollTop(rolly*(wincon.height()/winbox.height()))
           }
           if( rolly < 0){
               $(".skdesigner-floatroll-sign").css("top",0)
               $(".mybox").scrollTop(0)
           }
           if(rolly > (win_h-sign_h)){
               $(".skdesigner-floatroll-sign").css("top",win_h-sign_h)
               $(".mybox").scrollTop((win_h-sign_h)*(wincon.height()/winbox.height()))
           }

       })
       //


   })
//
   $("html").mouseup(function(){

       $(document).unbind();


   })
//如果鼠标滑出窗口停止事件
//   $("html").mouseout(function(){
//
//       $(document).unbind();
//
//
//   })
//
}

function myboxroll(winbox,wincon){
   var sign_top = winbox.scrollTop()*(winbox.height()/wincon.height())
   $(".skdesigner-floatroll-sign").css("top",sign_top +'px')
   winbox.scroll(function(){
       sign_top = winbox.scrollTop()*(winbox.height()/wincon.height())
       //滚标赋top
       $(".skdesigner-floatroll-sign").css("top",sign_top +'px')

   })
}

var sign_topwheel
function myboxrollwheel(winbox,wincon,num){
winbox.scrollTop(winbox.scrollTop()+num)
sign_topwheel = winbox.scrollTop()*(winbox.height()/wincon.height())

       //滚标赋top
       $(".skdesigner-floatroll-sign").css("top",sign_topwheel +'px')


}
//
//滚轮事件

function mouseroll(winbox,wincon,objroll){

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)
       }

};
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)
       }
});
}
//
</script>
</head>