/*css*/
.Box{position:relative;}
.contentBox{width:400px;height:240px;background:#EEE;position:relative;overflow:hidden;}
.content{position:absolute;width:400px;top:0;left:0;line-height:25px;color:#666;}
.scrollBox{position:absolute;width:5px;height:200px;top:0;left:410px;background:#EEE}
.scroll{position:absolute;width: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{width:960px;margin:0 auto;padding-top:50px;}
.Box{position:relative;}
.contentBox{width:400px;height:200px;background:#EEE;position:relative;overflow:hidden;}
.content{position:absolute;width:400px;top:0;left:0;line-height:25px;color:#666;}
.scrollBox{position:absolute;width:10px;height:180px;top:10px;left:410px;background:#EEE}
.scroll{position:absolute;width:10px;height:20px;top:0;left:0;background:#666;cursor:default;}
.scroll_top{position:absolute;top:-10px;left:0;width:10px;height:10px;background:#555;overflow:hidden;}
.scroll_bot{position:absolute;bottom:-10px;left:0;width: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");
