效果示例图
代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.scroll-container {
width: 100%;
height: 100vh;
position: relative;
}
.scroll-item {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
transition: 1s ease-in-out;
}
.content {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.scroll-item.cur {
height: 100%;
}
.scroll-item.prev {
top: 0;
}
.scroll-item.next {
bottom: 0;
}
.scroll-down .scroll-item.prev {
top: 0;
height: 0;
}
.scroll-down .scroll-item.cur {
top: 0;
height: 0;
}
.scroll-down .scroll-item.next {
bottom: 0;
height: 100%;
}
.scroll-up .scroll-item.prev {
top: 0;
height: 100%;
}
.scroll-up .scroll-item.cur {
bottom: 0;
height: 0;
}
.scroll-up .scroll-item.next {
bottom: 0;
height: 0;
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="scroll-item">
<div class="content" style="background-color: antiquewhite;">我是第1页</div>
</div>
<div class="scroll-item">
<div class="content" style="background-color: aqua;">我是第2页</div>
</div>
<div class="scroll-item">
<div class="content" style="background-color: beige;">我是第3页</div>
</div>
<div class="scroll-item">
<div class="content" style="background-color: blue;">我是第4页</div>
</div>
<div class="scroll-item">
<div class="content" style="background-color: blueviolet;">我是第5页</div>
</div>
<div class="scroll-item">
<div class="content" style="background-color: brown;">我是第6页</div>
</div>
<div class="scroll-item">
<div class="content" style="background-color: darkgreen;">我是第7页</div>
</div>
</div>
</body>
<script type="text/javascript">
const scrollContainer = document.querySelector(".scroll-container");
const scrollItem = document.querySelectorAll(".scroll-item");
const scrollCount = scrollItem.length;
let currentIndex = 0;
//初始化页面
function initItem() {
const prevIndex =
currentIndex - 1 < 0 ? scrollCount - 1 : currentIndex - 1;
const nextIndex =
currentIndex + 1 > scrollCount - 1 ? 0 : currentIndex + 1;
scrollItem[prevIndex].classList.add("prev");
scrollItem[currentIndex].classList.add("cur");
scrollItem[nextIndex].classList.add("next");
}
initItem();
//滚动鼠标滑轮时触发事件
let isAnimating = false;
scrollContainer.addEventListener("wheel", (e) => {
if (!e.deltaY) {
return;
}
if (isAnimating) {
return;
}
isAnimating = true;
if (e.deltaY > 0) {
console.log("[向下滚动]")
scrollContainer.classList.add("scroll-down");
currentIndex =
currentIndex + 1 > scrollCount - 1 ? 0 : currentIndex + 1;
} else {
console.log("[向上滚动]")
scrollContainer.classList.add("scroll-up");
currentIndex =
currentIndex - 1 < 0 ? scrollCount - 1 : currentIndex - 1;
}
});
//当过渡效果结束触发事件
scrollContainer.addEventListener("transitionend", () => {
isAnimating = false;
scrollItem.forEach(item => {
item.classList.remove("prev")
item.classList.remove("cur")
item.classList.remove("next")
})
scrollContainer.classList.remove("scroll-down");
scrollContainer.classList.remove("scroll-up");
initItem();
})
</script>
</html>