您的位置：首页 > Web前端 > JavaScript

JS自定义滚动条效果+鼠标滚轮事件

2016-04-14 18:03 645 查看

页面代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.3.js"></script>
<style>
*{margin:0;padding:0}
ul{list-style:none}
.detail{width:400px;height:360px;border:1px solid #ddd;text-align:center;margin:50px auto}
.title{width:400px;height:40px;background-color:#D6C3A7;border-bottom:1px solid #ddd;}
.title li{float:left;height:40px;line-height:40px;width:80px;}
.title li+li{width:160px}
.box{width:400px;height:300px;overflow:hidden}
.content{width:360px;float:left;}
.content li{height:50px;line-height:50px;font-size:18px;}
.content li div{display:inline-block;width:80px}
.content li div+div{width:130px}
.bar{float:left;width:10px;height:300px;background-color:#ddd;position:relative;}
.btn{position:absolute;right:-8px;top:0px;width:25px;height:25px;background-color:lightblue;
border:1px solid #ddd;border-radius:50%;cursor:pointer;}
.active{background-color:red}
</style>
</head>
<body>
<div class="detail">
<div class="title">
<ul>
<li>序号</li><li>用户</li><li>人气</li>
</ul>
</div>
<div class="box">
<ul class="content">
<li><div>1</div><div>137****1234</div><div>10,000</div></li>
<li><div>2</div><div>137****1234</div><div>9,000</div></li>
<li><div>3</div><div>137****1234</div><div>8,000</div></li>
<li><div>4</div><div>137****1234</div><div>7,000</div></li>
<li><div>5</div><div>137****1234</div><div>6,000</div></li>
<li><div>6</div><div>137****1234</div><div>5,000</div></li>
<li><div>7</div><div>137****1234</div><div>4,000</div></li>
<li><div>8</div><div>137****1234</div><div>3,000</div></li>
<li><div>9</div><div>137****1234</div><div>2,000</div></li>
<li><div>10</div><div>137****1234</div><div>1,000</div></li>
</ul>
<div class="bar">
<div class="btn"></div>
</div>
</div>
</div>
<script src="scroll.js"></script>
</body>
</html>

JS代码：

var box=$('.box');//主体内容的父级
var con=$('.content');//滑动的主体内容
var bar=$('.bar');//滑动条
var btn=$('.btn');//滑动槽
//自定义条状滑动条的长度
/*new_h = box.height() * bar.height() / con.height();
btn.css("height", new_h);*/
//初始化滑动条和滑动内容的位置
/* bth.style.top = 0;
con.style.marginTop=0;*/
var e = e || window.event;

var ay = parseInt(bar.height() - btn.height());//手柄可滑动距离
var by = parseInt(con.height() - box.height());//主体内容可滑动的内容

var ismove = 1;
var startY = 0;
var positionY=0;
var newTop,distanceMove,distanceMain;

btn.mousedown(function(e){
startY = e.clientY;
positionY = parseInt(btn.position().top);
ismove = 2;
btn.addClass('active');
return false;//阻止浏览器默认事件，比如拖拽鼠标会选中文字
});
btn.mouseup(function(){
ismove = 1;
btn.removeClass('active');
return false;
});
btn[0].onmousemove=function(e){
stopDefault(e);
if (ismove == 2){
btn.addClass('active');
distanceMove = e.clientY - startY;
newTop = positionY + distanceMove;
if (newTop < 0){
newTop = 0;
}else if(newTop > ay){
newTop = ay;
}
distanceMain = - newTop * by / ay;
btn.css('top', newTop);
con.css('margin-top',distanceMain);
}
return false;
};
$(document).mouseup(function(){
btn.mouseup();
})
$(document).mousemove(function(e){
if(ismove == 2){
btn[0].onmousemove(e);
}
})

//点击滚动槽的事件
var topCommon = box.offset().top-$(window).scrollTop();//元素到文档边框的距离
var btnHeight =btn.height();
bar.click(function (e) {
var e = e || window.event;
var distancsMove = e.clientY - topCommon - btnHeight/2;
var distanceMain = - distancsMove * by / ay;
con.animate({marginTop: distanceMain}, 100);
btn.animate({top: distancsMove}, 100);
return false;
})

//鼠标滚轮事件
box.on("mousewheel DOMMouseScroll", function (e){
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));      //detail是firefox的属性
var newBtop = parseInt(btn.css('top'));
var newCtop = 0;
if(delta < 0){ //向下滚动滑轮
newBtop += 20;
newCtop = -newBtop * by / ay;
if (newBtop > ay) {
newBtop = ay;
newCtop = -by;
}
btn.css('top', newBtop);
con.css("margin-top", newCtop);
return false;
}else if (delta > 0){    //向上滚动滑轮
newBtop -= 20;
newCtop = -newBtop * by / ay;
if (newBtop < 0){
newBtop = 0;
newCtop = 0;
}
btn.css('top', newBtop);
con.css("margin-top", newCtop);
return false;
}
return false;
})

function stopDefault(e) {
//阻止默认浏览器动作(W3C)
if (e && e.preventDefault){
e.preventDefault();
}else{//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航