js滑動下一頁功能怎么實現(xiàn)

實現(xiàn)滑動下一頁功能可以使用JavaScript的事件監(jiān)聽和DOM操作來實現(xiàn)。下面是一個簡單的示例：

HTML代碼：

<div id="container">
<div class="page">第一頁</div>
<div class="page">第二頁</div>
<div class="page">第三頁</div>
</div>

CSS代碼：

#container {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.page {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}

JavaScript代碼：

var container = document.getElementById('container');
var pages = document.getElementsByClassName('page');
var currentPage = 0;
container.addEventListener('wheel', function(event) {
if (event.deltaY > 0) {
nextPage();
} else {
previousPage();
}
});
function nextPage() {
if (currentPage < pages.length - 1) {
currentPage++;
scrollToCurrentPage();
}
}
function previousPage() {
if (currentPage > 0) {
currentPage--;
scrollToCurrentPage();
}
}
function scrollToCurrentPage() {
container.scrollTo(0, pages[currentPage].offsetTop);
}

這段代碼實現(xiàn)了鼠標滾輪滑動下一頁的功能。當滾輪向下滑動時，調(diào)用nextPage()函數(shù)，將currentPage加1，并調(diào)用scrollToCurrentPage()函數(shù)滑動到當前頁；當滾輪向上滑動時，調(diào)用previousPage()函數(shù)，將currentPage減1，并調(diào)用scrollToCurrentPage()函數(shù)滑動到當前頁。

注意：上述代碼僅實現(xiàn)了基本的滑動下一頁功能，如需更復(fù)雜的滑動效果和動畫，可以根據(jù)需求進行進一步的開發(fā)和優(yōu)化。