CSS整屏滑動效果是現代網站設計中常見的一種交互方式，可以讓用戶更加方便快捷的瀏覽網站內容。下面我們來了解一下如何實現這種效果。

html,
body {
height: 100%;
}
.container {
position: relative;
height: 100%;
transition: transform 0.8s ease-in-out;
}
.section {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

首先，我們需要設置html和body的高度為100%，以保證整個頁面占滿屏幕。我們的滑動效果是基于一個容器（.container）實現的，因此我們需要將容器的高度也設置為100%。此外，為了實現滑動動畫效果，我們需要給容器添加過渡效果（transition）。

在容器中，我們可以設置多個子元素（.section）作為每個頁面的內容。每個子元素也需要設置高度為100%，并將位置設置為絕對定位（absolute）。由于頁面的數量是不確定的，因此我們需要使用Flex布局來讓內容垂直居中。

<script>
let currentIndex = 0;
let maxIndex = 3;
let isAnimating = false;
const handleMouseWheel = (event) => {
if (isAnimating) {
return;
}
isAnimating = true;
setTimeout(() => {
isAnimating = false;
}, 800);
if (event.deltaY > 0) {
currentIndex = Math.min(currentIndex + 1, maxIndex);
} else {
currentIndex = Math.max(currentIndex - 1, 0);
}
const translateY =translateY(-${currentIndex * 100}%);
document.querySelector('.container').style.transform = translateY;
};
document.addEventListener('mousewheel', handleMouseWheel);
</script>

最后，我們需要添加JavaScript代碼來監聽鼠標滾輪事件，并根據滑動方向更新容器的位置。在代碼中，我們使用currentIndex變量來記錄當前頁面索引，并根據滾輪方向更新它。每次更新currentIndex后，我們需要根據它的值計算出容器的位置，并通過樣式（transform）更新它。注意，在滑動動畫過程中，我們需要設置一個isAnimating變量來防止重復滑動。

現在，我們已經了解了如何實現CSS整屏滑動效果。希望這篇文章對你有所幫助！