<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrap {
height: 100%;
width: 100%;
background: #ccc;
}
.skip-area {
position: absolute;
right: 0px;
height: 100%;
width: 20px;
background-color: aqua;
}
.skip-block {
position: absolute;
left: 5px;
width: 10px;
height: 50px;
background: red;
}
.content {
position: relative;
width: (100% - 20px);
background-color: bisque;
}
.list {
position: absolute;
top: 0px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="skip-area">
<div class="skip-block"></div>
</div>
<div class="content">
<ul class="list"></ul>
</div>
</div>
<script>
// 滑块的高度/滑槽的高度 = 视口的高度/内容的高度 = 滑块移动的距离 / 内容移动的距离
var block = document.querySelector('.skip-block');
var list = document.querySelector('.list');
for (let i = 0; i < 200; i++) {
let li = document.createElement('li');
li.innerHTML = i;
list.appendChild(li);
}
var scale = document.documentElement.clientHeight / list.offsetHeight;
block.style.height = document.documentElement.clientHeight * scale + 'px';
block.onmousedown = function (event) {
var eleY = block.offsetTop;
var startY = event.clientY;
document.onmousemove = function (event) {
var endY = event.clientY;
var disY = endY - startY;
var lastY = disY + eleY;
if (lastY < 0) {
lastY = 0;
} else if (
lastY >
document.documentElement.clientHeight - block.offsetHeight
) {
lastY = document.documentElement.clientHeight - block.offsetHeight;
}
block.style.top = lastY + 'px';
// 内容的移动的距离 = 滑块移动的距离 /scale
var contentT = lastY / scale;
list.style.top = -contentT + 'px';
};
document.onmouseup = function () {
console.log('触发了抬起事件');
this.onmousemove = this.onmouseup = null;
};
};
document.addEventListener('keydown', function (event) {
var step = 10;
if (event.keyCode == 38) {
//向上
let scrollT = block.offsetTop - step;
if (scrollT < 0) {
scrollT = 0;
} else if (
scrollT >
document.documentElement.clientHeight - block.offsetHeight
) {
scrollT =
document.documentElement.clientHeight - block.offsetHeight;
}
block.style.top = scrollT + 'px';
// content
let contentT = scrollT / scale;
list.style.top = -contentT + 'px';
} else if (event.keyCode == 40) {
//向下
let scrollT = block.offsetTop + step;
if (
scrollT >
document.documentElement.clientHeight - block.offsetHeight
) {
scrollT =
document.documentElement.clientHeight - block.offsetHeight;
}
block.style.top = scrollT + 'px';
let contentT = scrollT / scale;
list.style.top = -contentT + 'px';
}
});
//滚轮事件
document.addEventListener('mousewheel', fn);
document.addEventListener('DOMMouseScroll', fn);
var step = 10;
function fn(event) {
if (event.wheelDelta) {
step = event.wheelDelta > 0 ? -10 : 10;
} else if (event.detail) {
step = event.detail > 0 ? 10 : -10;
}
//当你基于一个逻辑进行判断 对一个值是执行加法或是执行减法 可以选择让这个值本身自带方向
var scrollT = scrollIn.offsetTop + step;
if (scrollT < 0) {
scrollT = 0;
} else if (
scrollT >
document.documentElement.clientHeight - scrollIn.offsetHeight
) {
scrollT =
document.documentElement.clientHeight - scrollIn.offsetHeight;
}
scrollIn.style.top = scrollT + 'px';
var contentT = scrollT / scale;
list.style.top = -contentT + 'px';
}
</script>
</body>
</html>
浙公网安备 33010602011771号