JQuery+DIV自定义滚动条样式的具体实现

   $(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();
       });
       vary1=0;
       $("#scrollContent").mousedown(function(event){
           varscrContentTop=$("#scrollContent").css("top");
           y1=event.clientY-parseInt(scrContentTop.replace("px",""));
           $("#scrollContent").mousemove(function(event){
               if((event.clientY-y1)<scrDefualtTop){
                   $("#scrollContent").css("top",scrDefualtTop+"px");
               }
               elseif((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");
       });
   });

   //改变滚动内容位置
   functionChangeScrollContent(){
       varscrTop=$("#scrollContent").css("top");
       varst=parseInt(scrTop.replace("px",""));
       st=((st-scrDefualtTop)*document.getElementById("mainScrollContent").scrollHeight)/scrMaxHeight
       $("#mainScrollContent").scrollTop(st);//滚动的高度
   }

   //改变滚动条位置
   functionChangeScroll(){
       varscrTop=$("#mainScrollContent").scrollTop();//滚动的高度
       scrTop=(scrTop*scrMaxHeight)/document.getElementById("mainScrollContent").scrollHeight+scrDefualtTop;
       $("#scrollContent").css("top",scrTop+"px");
   }
   </script>