html 代码:
<div class="box">
<div class="wrap">
<div class="page red">1</div>
<div class="page yellow">2</div>
<div class="page blue">3</div>
<div class="page pink">4</div>
<div class="page skyblue">5</div>
</div>
</div>
css代码:
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.page {
color: white;
text-align: center;
font-size: 200px;
}
.pink {
background-color: pink;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.skyblue {
background-color: skyblue;
}
.red {
background-color: red;
}
body {
overflow: hidden;
}
.box {
overflow: hidden;
}
.wrap {
position: absolute;
}
</style>
js代码:
<script>
var wrap = document.getElementsByClassName("wrap")[0];
var pages = document.getElementsByClassName("page");
for (var i = 0; i < pages.length; i++) {
//给元素定义宽高
pages[i].style.height = window.innerHeight + "px";
pages[i].style.width = window.innerWidth + "px";
}
var index = 0;
//鼠标的滚轮事件
window.onmousewheel = function (ev) {
ev = ev || window.event;
console.log(wrap.offsetTop);
if (wrap.offsetTop == -window.innerHeight * index) {//offsetTop为距离上方的位置,用来判断动画是否完成
if (ev.wheelDelta > 0) {
//页面向上滚动
index < 1 ? (index = 0) : index--;
wrap.style.top = -window.innerHeight * index + "px";
wrap.style.transition = "all 1s ease";
} else if (ev.wheelDelta < 0) {
//页面向下滚动
index > 3 ? (index = 4) : index++;
wrap.style.top = -window.innerHeight * index + "px";
wrap.style.transition = "all 1s ease";
}
}
};
</script>
总结:
里面还有一个问题是第一次的滚动没有过度动画,不知道怎么解决