divscroll.js

div布局的滚动条,可自定义样式,可读性强

var drag=false; //是否允许拖动
var mx,my;
var scrollbar_L;
var scrollbar_T;
var scrollbar_W;
var scrollbar_H;
var scrollarea_T,scrollarea_H;
var startT,startY;

function getInfor(){
mx=event.clientX+document.documentElement.scrollLeft;
my=event.clientY+document.documentElement.scrollTop; 
scrollbar_L=document.documentElement.clientLeft+$("outerDiv").style.pixelLeft+$("scroll_area").offsetLeft+$("scroll_bar").offsetLeft;
scrollbar_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop+$("scroll_bar").offsetTop;
scrollbar_W=$("scroll_bar").offsetWidth;
scrollbar_H=$("scroll_bar").offsetHeight;
scrollarea_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop;
scrollarea_H=$("scroll_area").offsetHeight;
}

function dragit(){
getInfor();

if(event.srcElement.id=="scroll_bar"){
  drag=true;
 // $("scroll_bar").style.background="#cccccc";
  startT=$("scroll_bar").style.pixelTop;
  startY=event.clientY;
 document.onmousemove=move;
   }
 }
function move(){
if(drag==true){
$("scroll_bar").style.pixelTop=startT+event.clientY-startY;
$("scroll_content").scrollTop=$("scroll_bar").style.pixelTop/$("scroll_area").offsetHeight*$("scroll_content").scrollHeight;
if($("scroll_bar").style.pixelTop<=0){ $("scroll_bar").style.pixelTop=0}
if($("scroll_bar").style.pixelTop>=(scrollarea_H-scrollbar_H)){ 

$("scroll_bar").style.pixelTop=scrollarea_H-scrollbar_H;
 }
return false;
   }

 }