javascript 实现模拟滚动条，但不支持鼠标滚轮
2014-08-04 09:11
302 查看
模拟滚动条做项目的时候，很多时候会用到，所以就写了一个这么模拟滚动条，但是不支持滚轮事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</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>
<div class="scroll">
<div id="boxWrap">
<div id="boxInner">
<p>“瘾”为何物? “瘾”是一种走火入魔的状态，由灵魂而肉体，以至灵肉无间。会过瘾的人对唯物、唯心之辩的态度是付之一笑。过瘾的那一会儿，你就是个小神仙，无所不能，无我无他，无虚无实。
假如说生命有度，把心与身的存在状态从低到高排列成度数，那么“瘾”就是一种超乎正常的生命度。达到这种生命度安全又不碍别人事的方法挺多，但这些方法的假象是受罪。巨大的甜头就在那一点儿苦头后面。比如我酷爱长跑，要的是那终极的舒适，但那舒适的穿越几乎是以垂死的状态去获取的。
写作之于我，也是一种秘密的过瘾。谁都说呀，歇歇吧，写那么苦图什么?过去我和他们见识一样，也认为自己挺悲壮的，整天背对世界，背对许多人间乐事在那里写。现在我发现自己并不是这么回事，其实是在偷着乐。背对世界，把所有杂念排除，把精神凝聚到白热程度，把所有的敏感都唤起来，使感觉丰满到极致。于是乎一些意外的词汇、句子在纸上出来了，它们组成了人物细节、行为，再往前逼自己一步，再越过一点儿不适，就达到了那种极端的舒适，因为自由了，为所欲为了。要说活着，这儿，你就是个小神仙，无所不能，无我无他，无虚无实。
假如说生命有度，把心与身的存在状态从低到高排列成度数，那么“瘾”就是一种超乎正常的生命度。达到这种生命度安全又不碍别人事的方法挺多，但这些方法的假象是受罪。巨大的甜头就在那一点儿苦头后面。比如我酷爱长跑，要的是那终极的舒适，但那舒适的穿越几乎是以垂死的状态去获取的。
写作之于我，也是一种秘密的过瘾。谁都说呀，歇歇吧，写那么苦图什么?过去我和他们见识一样，也认为自己挺悲壮的，整天背对世界，背对许多人间乐事在那里写。现在我发现自己并不是这么回事，其实是在偷着乐。背对世界，把所有杂念排除，把精神凝聚到白热程度，把所有的敏感都唤起来，使感觉丰满到极致。于是乎一些意外的词汇、句子在纸上出来了，它们组成了人物细节、行为，再往前逼自己一步，再越过一点儿不适，就达到了那种极端的舒适，因为自由了，为所欲为了。要说活着，这时的我是活到了淋漓尽致。我试着不写，可是不行，就像没醒透似的。一连多日不写，就是一连多日半打盹儿地过活，新陈代谢都不对了。出去旅行，同行的有丈夫，有时还有其他朋友。我的写作让他们都很头疼，一些计划要根据我的时间表转。他们抱怨，问我几天不写死不死得了。我说不写就是让我身上有一块痒痒，又不让我挠。哪怕早起一两个小时，我也得把过瘾的时间留出来。对我来说，生命一天不达到那个浓度、烈度，没有</p>
</div>
</div>
<div id="rollWrap">
<div id="rollInner"></div>
</div>
</div>
</body>
</html>
<script>
//获取相关的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>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</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>
<div class="scroll">
<div id="boxWrap">
<div id="boxInner">
<p>“瘾”为何物? “瘾”是一种走火入魔的状态，由灵魂而肉体，以至灵肉无间。会过瘾的人对唯物、唯心之辩的态度是付之一笑。过瘾的那一会儿，你就是个小神仙，无所不能，无我无他，无虚无实。
假如说生命有度，把心与身的存在状态从低到高排列成度数，那么“瘾”就是一种超乎正常的生命度。达到这种生命度安全又不碍别人事的方法挺多，但这些方法的假象是受罪。巨大的甜头就在那一点儿苦头后面。比如我酷爱长跑，要的是那终极的舒适，但那舒适的穿越几乎是以垂死的状态去获取的。
写作之于我，也是一种秘密的过瘾。谁都说呀，歇歇吧，写那么苦图什么?过去我和他们见识一样，也认为自己挺悲壮的，整天背对世界，背对许多人间乐事在那里写。现在我发现自己并不是这么回事，其实是在偷着乐。背对世界，把所有杂念排除，把精神凝聚到白热程度，把所有的敏感都唤起来，使感觉丰满到极致。于是乎一些意外的词汇、句子在纸上出来了，它们组成了人物细节、行为，再往前逼自己一步，再越过一点儿不适，就达到了那种极端的舒适，因为自由了，为所欲为了。要说活着，这儿，你就是个小神仙，无所不能，无我无他，无虚无实。
假如说生命有度，把心与身的存在状态从低到高排列成度数，那么“瘾”就是一种超乎正常的生命度。达到这种生命度安全又不碍别人事的方法挺多，但这些方法的假象是受罪。巨大的甜头就在那一点儿苦头后面。比如我酷爱长跑，要的是那终极的舒适，但那舒适的穿越几乎是以垂死的状态去获取的。
写作之于我，也是一种秘密的过瘾。谁都说呀，歇歇吧，写那么苦图什么?过去我和他们见识一样，也认为自己挺悲壮的，整天背对世界，背对许多人间乐事在那里写。现在我发现自己并不是这么回事，其实是在偷着乐。背对世界，把所有杂念排除，把精神凝聚到白热程度，把所有的敏感都唤起来，使感觉丰满到极致。于是乎一些意外的词汇、句子在纸上出来了，它们组成了人物细节、行为，再往前逼自己一步，再越过一点儿不适，就达到了那种极端的舒适，因为自由了，为所欲为了。要说活着，这时的我是活到了淋漓尽致。我试着不写，可是不行，就像没醒透似的。一连多日不写，就是一连多日半打盹儿地过活，新陈代谢都不对了。出去旅行，同行的有丈夫，有时还有其他朋友。我的写作让他们都很头疼，一些计划要根据我的时间表转。他们抱怨，问我几天不写死不死得了。我说不写就是让我身上有一块痒痒，又不让我挠。哪怕早起一两个小时，我也得把过瘾的时间留出来。对我来说，生命一天不达到那个浓度、烈度，没有</p>
</div>
</div>
<div id="rollWrap">
<div id="rollInner"></div>
</div>
</div>
</body>
</html>
<script>
//获取相关的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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在fedora中让 ThinkPad 的中键加小红帽支持模拟鼠标滚轮
- 让Fedora 19支持ThinkPad鼠标中键和小红点实现滚轮效果
- C# panel控件实现鼠标滚轮滚动拖动滚动条
- javascript模拟滚动条实现代码
- [愿创]让DBGrid支持鼠标滚轮浏览数据，及去除垂直滚动条！
- JavaScript实现鼠标滚轮控制页面图片切换功能示例
- javascript实现禁止鼠标滚轮事件
- 支持IE和Firefox的鼠标滚轮事件JavaScript代码
- Qt中隐藏滚动条重新实现鼠标滚轮事件wheelEvent
- JavaScript实现的水果忍者游戏，支持鼠标操作
- 父子窗体滚动条支持鼠标滚轮移动
- javascript滚轮控制模拟滚动条
- javascript滚轮控制模拟滚动条
- 使用Qt的鼠标支持，模拟实现粗略的画板连线
- JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
- javascript实现禁止鼠标滚轮事件
- javascript滚轮控制模拟滚动条
- JavaScript中通过鼠标事件实现模拟拖放效果
- 鼠标滚轮支持的behavior 只要在blend中拖动一下无需编写任何代码,就可以实现滚轮了
- Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）