js实现上下翻页

实现上下翻页的JavaScript方法

监听键盘事件实现翻页

通过监听键盘的上下箭头键实现翻页功能：

document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowDown') {
        window.scrollBy(0, window.innerHeight);
    } else if (event.key === 'ArrowUp') {
        window.scrollBy(0, -window.innerHeight);
    }
});

平滑滚动到指定位置

使用scrollTo方法实现平滑滚动效果：

function scrollPage(direction) {
    const currentPosition = window.pageYOffset;
    const pageHeight = window.innerHeight;
    const newPosition = direction === 'down' 
        ? currentPosition + pageHeight 
        : currentPosition - pageHeight;

    window.scrollTo({
        top: newPosition,
        behavior: 'smooth'
    });
}

按钮控制翻页

为页面添加翻页按钮并绑定事件：

<button id="pageUp">上一页</button>
<button id="pageDown">下一页</button>

<script>
    document.getElementById('pageUp').addEventListener('click', () => scrollPage('up'));
    document.getElementById('pageDown').addEventListener('click', () => scrollPage('down'));
</script>

触摸设备支持

为移动设备添加触摸事件支持：

let startY;
document.addEventListener('touchstart', (e) => {
    startY = e.touches[0].clientY;
}, false);

document.addEventListener('touchend', (e) => {
    const endY = e.changedTouches[0].clientY;
    if (startY > endY + 50) {
        scrollPage('down');
    } else if (startY < endY - 50) {
        scrollPage('up');
    }
}, false);

防止过度滚动

添加边界检查防止滚动超出页面范围：

function scrollPage(direction) {
    const currentPosition = window.pageYOffset;
    const pageHeight = window.innerHeight;
    const maxPosition = document.body.scrollHeight - window.innerHeight;

    let newPosition;
    if (direction === 'down') {
        newPosition = Math.min(currentPosition + pageHeight, maxPosition);
    } else {
        newPosition = Math.max(currentPosition - pageHeight, 0);
    }

    window.scrollTo({
        top: newPosition,
        behavior: 'smooth'
    });
}

全屏翻页效果

使用CSS配合实现全屏翻页效果：

html, body {
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
}

.section {
    height: 100vh;
    scroll-snap-align: start;
}

以上方法可以根据具体需求组合使用，实现不同风格的翻页效果。