大家一定見(jiàn)過(guò)一些網(wǎng)站的特效，使用鼠標(biāo)滾輪向下滾時(shí)，網(wǎng)頁(yè)上的內(nèi)容就會(huì)自動(dòng)翻頁(yè)。這就是CSS滾輪翻頁(yè)。

實(shí)現(xiàn)CSS滾輪翻頁(yè)非常簡(jiǎn)單，只需要使用CSS和JS兩種技術(shù)就可以了。首先，需要定義容器樣式，設(shè)置為相對(duì)定位，并且為其添加高度樣式。具體的代碼如下：

.container {
position: relative;
height: 100vh;
}

然后，需要為內(nèi)容塊添加樣式，使其顯示在容器中，并設(shè)置絕對(duì)定位。代碼如下：

.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

接下來(lái)，需要在JS中監(jiān)聽(tīng)鼠標(biāo)滾輪事件，并且根據(jù)滾動(dòng)方向來(lái)控制內(nèi)容塊的翻頁(yè)。代碼如下：

var container = document.querySelector('.container');
var contents = document.querySelectorAll('.content');
var currentContentIndex = 0;
container.addEventListener('wheel', function(e) {
var direction = e.deltaY >0 ? 1 : -1;
var nextIndex = currentContentIndex + direction;
if(nextIndex< 0 || nextIndex >contents.length - 1) {
return;
}
currentContentIndex = nextIndex;
container.style.transform = 'translateY(-' + currentContentIndex * 100 + 'vh)';
});

這段JS代碼中，首先獲取到容器和內(nèi)容塊的元素，并且定義當(dāng)前可見(jiàn)的內(nèi)容塊的索引值。然后，在滾輪事件監(jiān)聽(tīng)器中，根據(jù)鼠標(biāo)滾動(dòng)的方向來(lái)計(jì)算出下一個(gè)可見(jiàn)的內(nèi)容塊的索引值，同時(shí)也會(huì)檢查索引值是否越界。最后，通過(guò)設(shè)置容器的transform屬性，實(shí)現(xiàn)內(nèi)容塊的翻頁(yè)效果。

如果對(duì)JS不是很熟悉的話(huà)，也可以使用一些現(xiàn)成的庫(kù)來(lái)實(shí)現(xiàn)CSS滾輪翻頁(yè)的效果，比如fullpage.js。