javascript 实现模拟滚动条，但不支持鼠标滚轮

模拟滚动条做项目的时候，很多时候会用到，所以就写了一个这么模拟滚动条，但是不支持滚轮事件

<!doctype html>

<head>

</head>

<style>

*{padding:0;margin:0;}

.scroll{width:320px;margin:30px auto;}

#boxWrap{width:300px;border:1px solid #ccc;height:400px;overflow: hidden;float:left;position:relative;}

#boxInner{position:absolute;}

#boxInner p{padding:5px; line-height:24px;text-indent:2em;}

#rollWrap{background:#ddd;height:400px;width:15px;float:right;position: relative;}

#rollInner{height:30px;width:100%;background:orange;position:absolute;cursor:pointer;}

</style>

<body>

<p>“瘾”为何物? “瘾”是一种走火入魔的状态，由灵魂而肉体，以至灵肉无间。会过瘾的人对唯物、唯心之辩的态度是付之一笑。过瘾的那一会儿，你就是个小神仙，无所不能，无我无他，无虚无实。

假如说生命有度，把心与身的存在状态从低到高排列成度数，那么“瘾”就是一种超乎正常的生命度。达到这种生命度安全又不碍别人事的方法挺多，但这些方法的假象是受罪。巨大的甜头就在那一点儿苦头后面。比如我酷爱长跑，要的是那终极的舒适，但那舒适的穿越几乎是以垂死的状态去获取的。

写作之于我，也是一种秘密的过瘾。谁都说呀，歇歇吧，写那么苦图什么?过去我和他们见识一样，也认为自己挺悲壮的，整天背对世界，背对许多人间乐事在那里写。现在我发现自己并不是这么回事，其实是在偷着乐。背对世界，把所有杂念排除，把精神凝聚到白热程度，把所有的敏感都唤起来，使感觉丰满到极致。于是乎一些意外的词汇、句子在纸上出来了，它们组成了人物细节、行为，再往前逼自己一步，再越过一点儿不适，就达到了那种极端的舒适，因为自由了，为所欲为了。要说活着，这时的我是活到了淋漓尽致。我试着不写，可是不行，就像没醒透似的。一连多日不写，就是一连多日半打盹儿地过活，新陈代谢都不对了。出去旅行，同行的有丈夫，有时还有其他朋友。我的写作让他们都很头疼，一些计划要根据我的时间表转。他们抱怨，问我几天不写死不死得了。我说不写就是让我身上有一块痒痒，又不让我挠。哪怕早起一两个小时，我也得把过瘾的时间留出来。对我来说，生命一天不达到那个浓度、烈度，没有</p>

</div>

</div>

</body>

</html>

//获取相关的DOM元素

with(document){

var oBoxWrap = getElementById(‘boxWrap‘);

//内容信息

var oBoxInner = getElementById(‘boxInner‘);

var oRollWrap = getElementById(‘rollWrap‘);

//小滑块

var oRollInner = getElementById(‘rollInner‘);

}

//具体使用那个小滑块来控制滚动的距离，那么拖拽的时候就必须是它在动

oRollInner.onmousedown = function(ev){

//事件兼容

var oEvent = ev || event;

//获取当前滑块的距离

var disY = oEvent.clientY - oRollInner.offsetTop;

//IE兼容问题，下面是判断浏览器是否支持 setCapture 方法

if (oRollInner.setCapture) {

oRollInner.onmousemove = Move;

oRollInner.onmouseup = MoveUp;

}else{

document.onmousemove = Move;

document.onmouseup = MoveUp;

}

// 移动的函数

function Move(ev){

var oEvent = ev || event;

//定义距离的变量

var t = oEvent.clientY - disY;

//防止滑块超出距离

if (t < 0 ) {

t = 0;

//假如 t 大于滚动条宽度的时候等于滚动条宽度值

}else if ( t > oRollWrap.offsetHeight - oRollInner.offsetHeight ){

t = oRollWrap.offsetHeight - oRollInner.offsetHeight;

}

oRollInner.style.top = t +‘px‘;

// t值除去滚动框的高度减去滚动条的高度得到百分值

var scale = t / ( oRollWrap.offsetHeight - oRollInner.offsetHeight );

//里面的内容滚动（外面DIV高度 - 里面DIV高度） * 百分值得到负数

oBoxInner.style.top = ( oBoxWrap.offsetHeight - oBoxInner.offsetHeight ) * scale +‘px‘;

//显示百分值

document.title = scale;

}

//抬起的函数

function MoveUp(){

this.onmousemove = null;

this.onmouseup = null;

//IE 下独有的

if (oRollInner.releaseCapture) {

oRollInner.releaseCapture();

};

}

//IE 下 setCapture(); 阻止默认事件

if (oRollInner.setCapture) {

oRollInner.setCapture();

}

return false;

}

</script>