jquery模拟滚动条(支持鼠标滚轮)

2014-10-20阅读(10123)评论(0)牵着狗狗看MM

苏州实时公交查询

HTML

[html]<div id="wrap">
<div id="cont">www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com www.zjgsq.com
</div>
<div class="wrap-scroll-bar">
<div class="scroll-bar"></div>
</div>
</div>
[/html]

CSS

[css]#wrap { position:relative; overflow:hidden; width:500px; height:200px; margin:50px auto 0; background:#E8E8E8; }
#wrap .wrap-scroll-bar{ position:absolute; bottom:0; left:0; overflow:hidden; width:100%; height:15px;}
#wrap .scroll-bar { position:absolute; bottom:0; left:0; height:15px; width:20px; background:#CCC; }
#wrap #cont { position:absolute; top:0; left:0; width:2000px; height:185px; color:#FFF; background:#999; }
#wrap #cont span { margin-right:200px; }

[/css]

JS

[js]$(function() {
var $cont = $(‘#cont’);
var $wrap = $(‘#wrap’);
var $scrollBar = $(‘.scroll-bar’);
var $wrapScrollBar = $(‘.wrap-scroll-bar’);
var $cw = $cont.width();
var $ww = $wrap.width();
//设置滚动按钮宽度
$scrollBar.width($ww * $ww / $cw);

var $sw = $scrollBar.width();
var disX = 0;

//滚动条拖动事件
$scrollBar.mousedown(function(event) {
disX = event.pageX – $(this).position().left;
if (this.setCapture) {
$(this).mousemove(function(event) {
fnChangePos(event.pageX – disX);
});
this.setCapture(); //设置捕获范围
$scrollBar.mouseup(function() {
$(this).unbind(‘mousemove mouseup’);
this.releaseCapture(); //取消捕获范围
});
} else {
$(document).mousemove(function(event) {
fnChangePos(event.pageX – disX);
});
$(document).mouseup(function() {
$(document).unbind(‘mousemove mouseup’);
});
}
return false;
});
function fnChangePos(data) {
if (data < 0) data = 0;
else if (data > ($ww – $sw)) data = $ww – $sw;
$scrollBar.css(‘left’, data);
$cont.css(‘left’, -($cw – $ww) * data / ($ww – $sw));
}

//鼠标在滚动条上点击或滚动滚轮单次移动的距离
var sMoveDis = 100;
//滚动条单击事件注册
$wrapScrollBar.click(function(event) {
var relDisX = event.pageX – $(this).offset().left;
if (relDisX > ($scrollBar.position().left + $sw)) {
fnChangePos($scrollBar.position().left + sMoveDis)
} else if (relDisX < $scrollBar.position().left) {
fnChangePos(($scrollBar.position().left – sMoveDis))
};
});
//阻止事件冒泡
$scrollBar.click(function(event) {
event.stopPropagation();
});

//滚动条鼠标滚轮事件注册
if ($wrapScrollBar[0].addEventListener) { //for firefox
$wrapScrollBar[0].addEventListener("DOMMouseScroll", fnMouseWheel);
}
$wrapScrollBar[0].onmousewheel = fnMouseWheel; // for other browser

//鼠标滚轮事件处理函数
function fnMouseWheel(e) {
var evt = e || window.event;
var wheelDelta = evt.wheelDelta || evt.detail; //鼠标滚动值,可由此判断鼠标滚动方向
if (wheelDelta == -120 || wheelDelta == 3) fnChangePos($scrollBar.position().left + sMoveDis);
else if (wheelDelta == 120 || wheelDelta == -3) fnChangePos($scrollBar.position().left – sMoveDis);
}

});

[/js]

注:上面效果只能在滚动条上,鼠标滚轮才有效果
如果需要在整个box上滚动鼠标滚轮都有效,把鼠标滚轮事件注册对象改为“$wrap”即可。

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jquery模拟滚动条(支持鼠标滚轮)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏