JQ_简单版滚动条

/*css*/

.Box{position:relative;}
.contentBox{400px;height:240px;background:#EEE;position:relative;overflow:hidden;}
.content{position:absolute;400px;top:0;left:0;line-height:25px;color:#666;}
.scrollBox{position:absolute;5px;height:200px;top:0;left:410px;background:#EEE}
.scroll{position:absolute;5px;height:20px;top:0;left:0;background:#666;cursor:default;}

/*html*/

<div class="Box">
 <div class="contentBox">
  <div class="content" id="content">
   STAR<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   END
  </div>
 </div>
 <div class="scrollBox">
  <div class="scroll" id="scroll"></div>
 </div>
</div>

/*JQ*/

var scrollMyao = function(a,b){
    var $scroll = $(a);
    var $content = $(b);
    var d = $scroll.parent().height() - $scroll.height();
    var $contentHA = $content.height() - $content.parent().height();
    if($contentHA <= 0){
            $scroll.parent().hide();
            }
    $scroll.mousedown(function(e){
        var mouseY = e.pageY;
        var $scrollP = $scroll.position().top;
        $(document).bind("mousemove",function(e){
            var mouseYnow = e.pageY;
            var mValue = mouseYnow - mouseY + $scrollP;
            var per = mValue / d;
            var $contentH = -$contentHA*per;
            if(mValue >= 0 && mValue <=d){
                $scroll.css("top",mValue+"px");
                $content.css("top",$contentH+"px");
                }
            if(mValue <= 0){
                $scroll.css("top","0");
                $content.css("top","0");
                }
            if(mValue >= d){
                $scroll.css("top",d+"px");
                $content.css("top",-$contentHA+"px");
                }
        })

　　　　e.preventDefault();
                document.onselectstart=function(){return false}
    })
    $(document).mouseup(function(){
       $(document).unbind("mousemove");
       document.onselectstart=function(){return true}
    })
    }
scrollMyao("#scroll","#content");

//传的值,

第一个是滚动条ID,

第二个是主体内容的ID.

 

/*第二版,拥有上下箭头,可以用滚轮*/

/*css*/

.site{960px;margin:0 auto;padding-top:50px;}
.Box{position:relative;}
.contentBox{400px;height:200px;background:#EEE;position:relative;overflow:hidden;}
.content{position:absolute;400px;top:0;left:0;line-height:25px;color:#666;}
.scrollBox{position:absolute;10px;height:180px;top:10px;left:410px;background:#EEE}
.scroll{position:absolute;10px;height:20px;top:0;left:0;background:#666;cursor:default;}
.scroll_top{position:absolute;top:-10px;left:0;10px;height:10px;background:#555;overflow:hidden;}
.scroll_bot{position:absolute;bottom:-10px;left:0;10px;height:10px;background:#555;overflow:hidden;}
.on{background:#F00}

/*html*/

<div class="Box">
 <div class="contentBox">
  <div class="content" id="content">
   STAR<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   <img src="../images/i06.jpg" height="200" /><br />
   <img src="../images/i06.jpg" height="200" /><br />
   <img src="../images/i06.jpg" height="200" /><br />
   <img src="../images/i06.jpg" height="200" /><br />
   hello world<br />
   hello world<br />
   hello world<br />
   hello world<br />
   END
  </div>
 </div>
 <div class="scrollBox">
  <div class="scroll_top" id="scroll_top"></div>
  <div class="scroll_bot" id="scroll_bot"></div>
  <div class="scroll" id="scroll"></div>
 </div>
</div>

/*jq*/

var yAoscroll = function(a, b, c, d) {
    var $scroll = $(a);
    var $content = $(b);
    var $scrBot = $(c);
    var $scrTop = $(d);
    var $scrollH = $scroll.parent().height() - $scroll.height();
    var $contentHA = $content.height() - $content.parent().height();
    var $per = $contentHA / $scrollH;
    var timeDo = null;
    var timeDo1 = null;
    var timeTo = null;
    var timeTo1 = null;
    if ($contentHA <= 0) return;
    /*滚动条*/
    $scroll.mousedown(function(e) {
        var mouseY = e.pageY;
        var $scrollP = $scroll.position().top;
        $(document).bind("mousemove",
        function(e) {
            var mouseYnow = e.pageY;
            var mValue = mouseYnow - mouseY + $scrollP;
            var $contentH = -mValue * $per;
            if (mValue >= 0 && mValue <= $scrollH) {
                $scroll.css("top", mValue + "px");
                $content.css("top", $contentH + "px");
            }
            if (mValue <= 0) {
                $scroll.css("top", "0");
                $content.css("top", "0");
            }
            if (mValue >= $scrollH) {
                $scroll.css("top", $scrollH + "px");
                $content.css("top", -$contentHA + "px");
            }
        })
         e.preventDefault();
        document.onselectstart = function() {
            return false
        }
    })
     $(document).mouseup(function() {
        $(document).unbind("mousemove");
        document.onselectstart = function() {
            return true
        }
    })
    /*按钮*/
     $scrBot.mousedown(function() {
        $(this).addClass("on")
        var $scrollP = $scroll.position().top;
        var $contenp = $content.position().top;
        scrXia($scrollP);
        conSha($contenp);
    })
     $scrBot.mouseup(function() {
        $(this).removeClass("on");
        clearTimeout(timeDo);
        clearTimeout(timeDo1)
    })
     $scrTop.mousedown(function() {
        $(this).addClass("on")
        var $scrollP = $scroll.position().top;
        var $contenp = $content.position().top;
        scrSha($scrollP);
        conXia($contenp);
    })
     $scrTop.mouseup(function() {
        $(this).removeClass("on");
        clearTimeout(timeTo);
        clearTimeout(timeTo1)
    })
     function scrXia(a) {
        if (a < $scrollH) {
            a++
            $scroll.css("top", a + "px");
            timeDo = setTimeout(function() {
                scrXia(a);
            },
            10)
        }
    }
    function conSha(a) {
        if (a > -$contentHA) {
            a = a - $per * 1;
            if (a < -$contentHA) a = -$contentHA;
            $content.css("top", a + "px");
            timeDo1 = setTimeout(function() {
                conSha(a);
            },
            10)
        }
    }
    function scrSha(a) {
        if (a > 0) {
            a--;
            $scroll.css("top", a + "px");
            timeTo = setTimeout(function() {
                scrSha(a);
            },
            10)
        }
    }
    function conXia(a) {
        if (a < 0) {
            a = a + $per * 1;
            if (a > 0) a = 0;
            $content.css("top", a + "px");
            timeTo1 = setTimeout(function() {
                conXia(a);
            },
            10)
        }
    }
    /*滚轮*/
    $content.hover(function(){
        if(window.addEventListener){this.addEventListener('DOMMouseScroll', wheel, false)};
        this.onmousewheel = wheel;
        window.onmousewheel = document.onmousewheel = function(){return false;}
        },function(){
        if(window.addEventListener)this.removeEventListener('DOMMouseScroll', wheel, false);
        this.onmousewheel = this.onmousewheel = null;    
        window.onmousewheel = document.onmousewheel = function(){return true;}
        })
    function handle(delta) {
        var i = $content.position().top;
         if (delta < 0)
         {
           i = i-10;
           i2 = i/$per;
           if(i<=-$contentHA){
               $content.css("top",-$contentHA+"px");
               $scroll.css("top",$scrollH+"px")
               i=-$contentHA;
               }
           else{
               $content.css("top",i+"px")
               $scroll.css("top",-i2+"px")
               }
         }
         else
         {
           i=i+10;
           i2 = i/$per;
           if(i>=0){
               $content.css("top",0+"px");
               $scroll.css("top",0+"px")
               i=0;
               }
           else{
                $content.css("top",i+"px")
                   $scroll.css("top",-i2+"px")
                   }
         }
        }
        function wheel(event){
         var delta = 0;
         if(!event)event = window.event;
         if(event.wheelDelta){
          delta = event.wheelDelta/120;
          if(window.opera)delta = -delta;
         }else if(event.detail)delta = -event.detail/3;
         if(delta)handle(delta);
         if(!window.event){
            event.preventDefault();
             }
        
        }
        
}
 yAoscroll ("#scroll","#content","#scroll_bot","#scroll_top");