谷歌浏览器滚轮事件 ：mousewheel
火狐浏览器滚轮事件 ：DOMMouseScroll
鼠标滚轮滚动方向：
谷歌：e.wheelDelta 120倍数 向前
e.wheelDelta -120倍数 向后
火狐：e.detail -3 向前
e.detail 3 向后
鼠标滚轮事件兼容函数
function mousewheel(dom,callback){
var type="mousewheel";//谷歌浏览器
if(dom.onmousewheel===undefined){//火狐浏览器
type="DOMMouseScroll"
}
if(dom.addEventListener){//IE8及以上版本
dom.addEventListener(type,callback)
}else{
dom.attachEvent("on"+type,function(){//IE低版本
//attacEvent函数的this指向window,使用匿名函数统一this的指向为dom
callback.call(dom);//
})
}
}
自定义滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
body{font-family: "Microsoft YaHei",serif;}
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul,li{margin:0;padding:0;list-style:none;}
img{border:none;}
body{
user-select: none;
}
#content{
position: relative;
width:500px;
height:600px;
margin: 50px auto;
padding: 0 20px;
background-color: #f1f3f4;
overflow: hidden;
}
#content ul{
position: absolute;
margin-right: 20px;
}
#content ul li{
border-bottom: 1px solid #fff;
line-height: 35px;
font-size: 18px;
}
#whell{
position: absolute;
top:0;
right: 0;
width:17px;
height:100%;
padding: 0 1px;
background-color: darkgray;
border-radius: 10px;
}
#whell .slider{
position: absolute;
top:0;
left:1px;
width: 16px;
height: 100px;
background-color: #f1f3f4;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="content">
<ul>
<li>
<p>1.The love world is big, which can hold hundreds of disappointments;the love world is small which is crowded even with three people inside.</p>
<p>原来爱情的世界很大，大到可以装下上百种委压;原来爱情的世界很小，小到三个人就挤到窒息。</p>
</li>
<li>
<p>2.To the world you may be one person, but to one person you may be the world.</p>
<p>对于世界简育，你是一个人;但是对于某个人，你是他的整个世界。</p>
</li>
<li>
<p>3.Maybe God wants us to meet a few. wrons people before meeting the right one,s0 that when we fnally meet the person, we will know how to be grateful.</p>
<p>在遇到梦中人之前，上天也许会安排我们先遇判别的人;在我们终于遇见心仪的人时，便应当心存感激。</p>
</li>
<li>
<p>4.It is better bo have love and lost than never to have loved at all.</p>
<p>宁可普经爱过而失败，也不要从来未普有过一次爱。</p>
</li>
<li>
<p>5.The love world is big, which can hold hundreds of disappointments;the love world is small which is crowded even with three people inside.</p>
<p>原来爱情的世界很大，大到可以装下上百种委压;原来爱情的世界很小，小到三个人就挤到窒息。</p>
</li>
<li>
<p>6.To the world you may be one person, but to one person you may be the world.</p>
<p>对于世界简育，你是一个人;但是对于某个人，你是他的整个世界。</p>
</li>
<li>
<p>7.Maybe God wants us to meet a few. wrons people before meeting the right one,s0 that when we fnally meet the person, we will know how to be grateful.</p>
<p>在遇到梦中人之前，上天也许会安排我们先遇判别的人;在我们终于遇见心仪的人时，便应当心存感激。</p>
</li>
<li>
<p>8.It is better bo have love and lost than never to have loved at all.</p>
<p>宁可普经爱过而失败，也不要从来未普有过一次爱。</p>
</li>
<li>
<p>9.The love world is big, which can hold hundreds of disappointments;the love world is small which is crowded even with three people inside.</p>
<p>原来爱情的世界很大，大到可以装下上百种委压;原来爱情的世界很小，小到三个人就挤到窒息。</p>
</li>
<li>
<p>10.To the world you may be one person, but to one person you may be the world.</p>
<p>对于世界简育，你是一个人;但是对于某个人，你是他的整个世界。</p>
</li>
<li>
<p>11.Maybe God wants us to meet a few. wrons people before meeting the right one,s0 that when we fnally meet the person, we will know how to be grateful.</p>
<p>在遇到梦中人之前，上天也许会安排我们先遇判别的人;在我们终于遇见心仪的人时，便应当心存感激。</p>
</li>
<li>
<p>12.It is better bo have love and lost than never to have loved at all.</p>
<p>宁可普经爱过而失败，也不要从来未普有过一次爱。</p>
</li>
<li>
<p>13.The love world is big, which can hold hundreds of disappointments;the love world is small which is crowded even with three people inside.</p>
<p>原来爱情的世界很大，大到可以装下上百种委压;原来爱情的世界很小，小到三个人就挤到窒息。</p>
</li>
<li>
<p>14.To the world you may be one person, but to one person you may be the world.</p>
<p>对于世界简育，你是一个人;但是对于某个人，你是他的整个世界。</p>
</li>
<li>
<p>15.Maybe God wants us to meet a few. wrons people before meeting the right one,s0 that when we fnally meet the person, we will know how to be grateful.</p>
<p>在遇到梦中人之前，上天也许会安排我们先遇判别的人;在我们终于遇见心仪的人时，便应当心存感激。</p>
</li>
<li>
<p>16.It is better bo have love and lost than never to have loved at all.</p>
<p>宁可普经爱过而失败，也不要从来未普有过一次爱。</p>
</li>
<li>
<p>17.The love world is big, which can hold hundreds of disappointments;the love world is small which is crowded even with three people inside.</p>
<p>原来爱情的世界很大，大到可以装下上百种委压;原来爱情的世界很小，小到三个人就挤到窒息。</p>
</li>
<li>
<p>18.To the world you may be one person, but to one person you may be the world.</p>
<p>对于世界简育，你是一个人;但是对于某个人，你是他的整个世界。</p>
</li>
<li>
<p>19.Maybe God wants us to meet a few. wrons people before meeting the right one,s0 that when we fnally meet the person, we will know how to be grateful.</p>
<p>在遇到梦中人之前，上天也许会安排我们先遇判别的人;在我们终于遇见心仪的人时，便应当心存感激。</p>
</li>
<li>
<p>20.It is better bo have love and lost than never to have loved at all.</p>
<p>宁可普经爱过而失败，也不要从来未普有过一次爱。</p>
</li>
<li>
<p>21.The love world is big, which can hold hundreds of disappointments;the love world is small which is crowded even with three people inside.</p>
<p>原来爱情的世界很大，大到可以装下上百种委压;原来爱情的世界很小，小到三个人就挤到窒息。</p>
</li>
<li>
<p>22.To the world you may be one person, but to one person you may be the world.</p>
<p>对于世界简育，你是一个人;但是对于某个人，你是他的整个世界。</p>
</li>
<li>
<p>23.Maybe God wants us to meet a few. wrons people before meeting the right one,s0 that when we fnally meet the person, we will know how to be grateful.</p>
<p>在遇到梦中人之前，上天也许会安排我们先遇判别的人;在我们终于遇见心仪的人时，便应当心存感激。</p>
</li>
<li>
<p>21.The love world is big, which can hold hundreds of disappointments;the love world is small which is crowded even with three people inside.</p>
<p>原来爱情的世界很大，大到可以装下上百种委压;原来爱情的世界很小，小到三个人就挤到窒息。</p>
</li>
<li>
<p>22.To the world you may be one person, but to one person you may be the world.</p>
<p>对于世界简育，你是一个人;但是对于某个人，你是他的整个世界。</p>
</li>
<li>
<p>23.Maybe God wants us to meet a few. wrons people before meeting the right one,s0 that when we fnally meet the person, we will know how to be grateful.</p>
<p>在遇到梦中人之前，上天也许会安排我们先遇判别的人;在我们终于遇见心仪的人时，便应当心存感激。</p>
</li>
</ul>
<div id="whell">
<div class="slider"></div>
</div>
</div>
<script src="./mousewheel.js"></script>
<script>
var oSlider = document.getElementsByClassName('slider')[0];
var oContent = document.getElementById('content');
var oUl = document.getElementsByTagName('ul')[0];
// oSlider.style.height = 500000/oUl.clientHeight+'px';
//获取oSlider的最大竖直滚动距离
var topMax = oSlider.parentNode.clientHeight - oSlider.clientHeight;
var contentMax = oUl.clientHeight - oContent.clientHeight;
oSlider.addEventListener('mousedown',function(e){
e = e||window.event; //兼容事件对象
var startY = e.clientY; //获取鼠标按下的竖直位置
var startTop = oSlider.offsetTop;//获取鼠标按下时的距定位父级的竖直距离
document.addEventListener('mousemove',move)
/*mousemove的事件处理函数*/
function move(e) {
var nowTop = startTop+e.clientY-startY;
nowTop = Math.min(nowTop,topMax);//限制最大边界
nowTop = Math.max(nowTop,0);//限制最小边界
/*
* oSlider的top和oUl的top之间的关系
* x y
* 0 0
* topMax contentMax
* nowTop y
* */
oSlider.style.top = nowTop+'px';
oUl.style.top = -(contentMax/topMax)*nowTop+'px'
}
/*鼠标抬起的时候 清除mousemove的事件处理函数 mouseup的事件处理函数*/
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseup',arguments.callee)
})
})
mousewheel(oContent,function(e){
e = e||window.event;//兼容事件对象
if(e.wheelDelta>120||e.detail<0){//滚轮向前滚动
var nowTop = oSlider.offsetTop-10;
nowTop = Math.max(nowTop,0);//限制最小边界
oSlider.style.top = nowTop+'px';
}else{ //滚轮向后滚动
var nowTop = oSlider.offsetTop+10;
nowTop = Math.min(nowTop,topMax);//限制最大边界
oSlider.style.top = nowTop+'px';
}
oUl.style.top = -(contentMax/topMax)*nowTop+'px';
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
