<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>拖拽+滚动栏</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0; padding: 0;}
body{font-family:14px/100% "microsoft yahei"; }
#f-wrap{ 1000px; margin: 0 auto; padding: 10px; border:1px dotted green;}
#box{820px; padding-right:12px; height:500px; border:1px solid #ccc; overflow: hidden; position: relative;}
/*内容区*/
#cnt{800px; line-height:24px; position:absolute; padding:10px; background-color:#fff;}
/*滚动栏*/
#scrollBd{12px; height:500px; background-color:#ddd; position:absolute; top:0; right:0;}
#scrollBar{12px; height:50px; background-color:#aaa; position: absolute; cursor: pointer; -webkit-border-radius:12px; -moz-border-radius:12px; -o-border-radius:12px; border-radius:12px;}
</style>
<script type="text/javascript">
window.onload= function(){
var oWrap = document.getElementById('f-wrap'),
oScroll = document.getElementById('scrollBd'),
oBar = document.getElementById('scrollBar'),
oBox = document.getElementById('box'),
oCnt = document.getElementById('cnt');
// 点击运行
oBar.onmousedown = function(e){
var e = e||event;
var disY = e.clientY - oBar.offsetTop;
if(oBar.setCapture){
oBar.onmousemove = fnMove;
oBar.onmouseup = fnUp;
oBar.setCapture();
}else{
document.onmousemove = fnMove;
document.onmouseup = fnUp;
}
// 移动
function fnMove(e){
var e = e||event;
var t = e.clientY - disY;
setTop(t);
}
// 弹起
function fnUp(){
this.onmousemove = null;
this.onmouseup = null;
if(this.releaseCapture){
this.releaseCapture();
}
}
return false;
}
// 滚动
function fnWheel(e){
var e = e||event;
var flag =true;
flag = e.wheelDelta ? e.wheelDelta<0 : e.detail>0;
if(flag){
setTop(oBar.offsetTop+10);
}else{
setTop(oBar.offsetTop-10)
}
if(e.preventDefault){
e.preventDefault();
}
return false;
}
addEvent(oWrap,'mousewheel',fnWheel);
addEvent(oWrap,'DOMMouseScroll',fnWheel);
function setTop(t){
if(t<=0){
t=0;
}else if(t >= oScroll.offsetHeight - oBar.offsetHeight){
t = oScroll.offsetHeight - oBar.offsetHeight;
}
oBar.style.top = t +'px';
// 滑块所占比例
var scale = t/(oScroll.offsetHeight - oBar.offsetHeight);
oCnt.style.top = -(oCnt.offsetHeight - box.offsetHeight) * scale + 'px';
document.title= scale;
}
}
// 浏览器兼容：封装事件绑定
function addEvent(obj,sEvent,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ sEvent,fn);
}else{
obj.addEventListener(sEvent,fn,false);
}
}
</script>
</head>
<body>
<div id="f-wrap">
<span style="float:right; font-size:20px; color:#999;">可运行区域</span>
<div id="box">
<div id="scrollBd">
<div id="scrollBar"></div>
</div>
<div id="cnt">
<h2>小苹果</h2>
<p>我种下一颗种子</p>
<p>最终长出了果实</p>
<p>今天是个伟大日子</p>
<p>摘下星星送给你</p>
<p>拽下月亮送给你</p>
<p>让太阳每天为你升起</p><br>
<p>变成蜡烛燃烧自己</p>
<p>仅仅为照亮你</p>
<p>把我一切都献给你</p>
<p>仅仅要你欢喜</p>
<p>你让我每一个明天都</p>
<p>变得有意义</p>
<p>生命虽短爱你永远</p>
<p>不离不弃</p><br>
<p>你是我的小呀小苹果儿</p>
<p>怎么爱你都不嫌多</p>
<p>红红的小脸儿温暖我的心窝</p>
<p>点亮我生命的火 火火火火</p>
<p>你是我的小呀小苹果儿</p>
<p>就像天边最美的云朵</p>
<p>春天又来到了花开满山坡</p>
<p>种下希望就会收获</p><br>
<p>从不认为你讨厌</p>
<p>你的一切都喜欢</p>
<p>有你的每天都新奇</p>
<p>有你阳光更灿烂</p>
<p>有你黑夜不黑暗</p>
<p>你是白云我是蓝天</p><br>
<p>春天和你漫步在盛开的 花丛间</p>
<p>夏天夜晚陪你一起看 星星眨眼</p>
<p>秋天黄昏与你徜徉在 金色麦田</p>
<p>冬天雪花飞舞有你 更加温暖</p><br>
<p>你是我的小呀小苹果儿</p>
<p>怎么爱你都不嫌多</p>
<p>红红的小脸儿温暖我的心窝</p>
<p>点亮我生命的火 火火火火</p>
<p>你是我的小呀小苹果儿</p>
<p>就像天边最美的云朵</p>
<p>春天又来到了花开满山坡</p>
<p>种下希望就会收获</p><br>
<p>你是我的小呀小苹果儿</p>
<p>怎么爱你都不嫌多</p>
<p>红红的小脸儿温暖我的心窝</p>
<p>点亮我生命的火 火火火火</p>
<p>你是我的小呀小苹果儿</p>
<p>就像天边最美的云朵</p>
<p>春天又来到了花开满山坡</p>
<p>种下希望就会收获</p>
</div>
</div>
</div>
</body>
</html>