js滑动下一页的有哪些方法

js滑动下一页的有哪些方法

在JavaScript中，可以通过监听鼠标滚轮事件来实现滑动下一页的效果。以下是一个简单的例子：

HTML代码：

“`

第一页

第二页

第三页

“`

CSS代码：

“`

.page {

height: 100vh;

}

“`

JavaScript代码：

“`

var pages = document.querySelectorAll('.page');

var currentPage = 0;

function scrollToNextPage(event) {

if (event.deltaY < 0) {

// 向上转动，转动到上一页

if (currentPage > 0) {

currentPage–;

pages[currentPage].scrollIntoView({ behavior: 'smooth' });

}

} else if (event.deltaY > 0) {

// 向下转动，转动到下一页

if (currentPage < pages.length – 1) {

currentPage++;

pages[currentPage].scrollIntoView({ behavior: 'smooth' });

}

}

}

window.addEventListener('wheel', scrollToNextPage);

“`

在上面的例子中，首先使用CSS将每页的高度设置为100vh，确保每页都占据全部屏幕。然后，使用JavaScript监听鼠标滚轮事件，根据滚轮转动的方向，转动到上一页或下一页。使用 `scrollIntoView()` 方法将页面转动到指定位置，使用 `behavior: 'smooth'` 参数可以实现平滑转动的效果。

本文来源：https://www.yuntue.com/post/75150.html | 云服务器网，转载请注明出处！