自定义滚动条的万能比例：
**滚动条的高度 / 屏幕的高度 = 屏幕的高度 / 内容的高度 = 滚动条的移动距离 / 内容的滚动距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑块and鼠标滚轮</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow: hidden;
}
#wrap {
width: 100%;
height: 100%;
overflow: hidden;
}
#scrollBar {
height: 100%;
width: 30px;
/* border-top: 50px solid grey;
border-bottom: 50px solid grey; */
border-left: 1px solid gray;
border-right: 1px solid gray;
position: absolute;
right: 0;
top: 0;
}
#scrollIn {
width: 90%;
/* height: 30px; */
background-color: gainsboro;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.content {
position: absolute;
}
</style>
</head>
<body>
<div id="wrap">
<div class="content"></div>
<div id="scrollBar">
<div id="scrollIn"></div>
</div>
</div>
<script>
window.onload = function () {
var content = document.querySelector('#wrap .content');
var scrollIn = document.querySelector('#scrollIn');
var str = '';
var flag = '';
for (var i = 0; i < 1000; i++) {
str += i + '<br>'
content.innerHTML = str;
}
var scrollInHeight = document.documentElement.clientHeight * document.documentElement.clientHeight / content.offsetHeight;
scrollIn.style.height = scrollInHeight + 'px';
scrollIn.onmousedown = function (event) {
event = event || window.event;
var my = event.clientY - this.offsetTop;
scrollIn.setCapture && scrollIn.setCapture();
document.onmousemove = function (event) {
event = event || window.event;
var disY = event.clientY - my;
disY < 0 ? disY = 0 : disY = disY;
disY > document.documentElement.clientHeight - scrollIn.offsetHeight ? disY = document.documentElement.clientHeight - scrollIn.offsetHeight : disY = disY;
scrollIn.style.top = disY + 'px';
var contentTop = document.documentElement.clientHeight * disY / scrollInHeight;
content.style.top = -contentTop + 'px';
}
document.onmouseup = function () {
this.onmouseup = this.onmousemove = null;
scrollIn.releaseCapture && scrollIn.releaseCapture();
}
return false;
}
document.addEventListener('mousewheel', mouseSrcoll);
document.addEventListener('DOMMouseScroll', mouseSrcoll);
function mouseSrcoll(event) {
event = event || window.event;
if (event.wheelDelta) {
if (event.wheelDelta < 0) {
flag = true;
} else {
flag = false;
}
} else if (event.detail) {
if (event.detail < 0) {
flag = true;
} else {
flag = false;
}
}
var disY = 0;
if (flag) {
disY = scrollIn.offsetTop + 10;
disY < 0 ? disY = 0 : disY = disY;
disY > document.documentElement.clientHeight - scrollIn.offsetHeight ? disY = document.documentElement.clientHeight - scrollIn.offsetHeight : disY = disY;
scrollIn.style.top = disY + 'px';
} else {
disY = scrollIn.offsetTop - 10;
disY < 0 ? disY = 0 : disY = disY;
disY > document.documentElement.clientHeight - scrollIn.offsetHeight ? disY = document.documentElement.clientHeight - scrollIn.offsetHeight : disY = disY;
scrollIn.style.top = disY + 'px';
}
var contentTop = document.documentElement.clientHeight * disY / scrollInHeight;
content.style.top = -contentTop + 'px';
}
}
</script>
</body>
</html>
