鼠标滚轮事件
FireFox : DOMMouseScroll
e.detail 向下滚动为 3 向上滚动 -3
非FireFox : onmousewheel
e.wheelDelta 向下滚动-120 向上滚动120
自定滚动条源码
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#box {
width: 100%;
height: 100%;
overflow: hidden;
}
.ball {
width: 100%;
height: 500px;
}
#scroll {
width: 6px;
height: 96%;
position: fixed;
top: 2%;
right: 5px;
border-radius: 3px;
background-color: rgba(235, 233, 233, 0.5);
z-index: 9998;
opacity: 1;
}
#scrollBar {
position: absolute;
z-index: 9999;
width: 6px;
height: 20px;
border-radius: 3px;
left: 0;
top: 0;
background-color: #383838;
}
</style>
</head>
<body style="overflow:hidden;">
<div id="box">
<div id="content">
<p class="ball" style="background-color:lightpink;"></p>
<p class="ball" style="background-color:blue;"></p>
<p class="ball" style="background-color:yellow;"></p>
<p class="ball" style="background-color:lightpink;"></p>
<p class="ball" style="background-color:blue;"></p>
<p class="ball" style="background-color:yellow;"></p>
</div>
</div>
<div id="scroll">
<div id="scrollBar"></div>
</div>
</body>
</html>
<script type="text/javascript">
var content = document.getElementById("content");
var box = document.getElementById("box");
var scroll = document.getElementById("scroll");
var scrollBar = document.getElementById("scrollBar");
var data = 30;
// 浏览器的可视高度减/页面的总高度*滚动栏的总高度=滚动按钮的高度
var _eight;
window.onresize = function (){
init();
}
function init (){
_height = window.innerHeight * scroll.offsetHeight / content.offsetHeight;
scrollBar.style.height = _height + "px";
}
init();
//火狐
box.addEventListener("DOMMouseScroll", function (e) {
var e = e || event;
if (e.detail > 0) {//向下滚动
box.scrollTop += data;
} else {//向上滚动
box.scrollTop -= data;
}
//浏览器的滚动距离/(页面的总高度-浏览器的可视高度)* (滚动栏的总高度-滚动按钮的高度)= 滚动的距离
var _top = box.scrollTop * (scroll.offsetHeight - scrollBar.offsetHeight) / (content.offsetHeight - window.innerHeight);
scrollBar.style.top = _top + "px";
});
//非火狐
box.addEventListener("mousewheel", function (e) {
var e = e || event;
if (e.wheelDelta > 0) {//向上滚动
box.scrollTop -= data;
} else {//向下滚动
box.scrollTop += data;
}
//浏览器的滚动距离/(页面的总高度-浏览器的可视高度)* (滚动栏的总高度-滚动按钮的高度)= 滚动的距离
var _top = box.scrollTop * (scroll.offsetHeight - scrollBar.offsetHeight) / (content.offsetHeight - window.innerHeight);
scrollBar.style.top = _top + "px";
});
</script>