js滑动下一页功能怎么实现

981
2023/6/18 23:23:53
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

实现滑动下一页功能可以使用JavaScript的事件监听和DOM操作来实现。下面是一个简单的示例:

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);
}

这段代码实现了鼠标滚轮滑动下一页的功能。当滚轮向下滑动时,调用nextPage()函数,将currentPage加1,并调用scrollToCurrentPage()函数滑动到当前页;当滚轮向上滑动时,调用previousPage()函数,将currentPage减1,并调用scrollToCurrentPage()函数滑动到当前页。

注意:上述代码仅实现了基本的滑动下一页功能,如需更复杂的滑动效果和动画,可以根据需求进行进一步的开发和优化。

辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: js异步函数async/awit怎么使用