<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
overflow: hidden;
}
.container {
transform: translateY(0vh);
transition: 0.5s;
}
.container div {
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div style="background: #ada;"></div>
<div style="background: #f00;"></div>
<div style="background: #ff0;"></div>
<div style="background: #0ff;"></div>
<div style="background: #00f;"></div>
</div>
<script>
let i = 0
let container = document.querySelector('.container')
let endTime = new Date() //节流
window.onmousewheel = e => {
if (new Date() - endTime < 500)
return console.log('滚动太频繁，被忽略了');
if (e.wheelDeltaY < 0) {
if (i === 4) return;
i++
} else {
if (i === 0) return;
i--
}
container.style.transform = `translateY(-${i * 100}vh)`
endTime = new Date()
}
</script>
</body>
</html>
