js全屏滚动效果

<div class="section" id="section1">Section 1</div>
<div class="section" id="section2">Section 2</div>
<div class="section" id="section3">Section 3</div>

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.section {
    height: 100vh; /* 视口高度 */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}

#section1 { background-color: #f06; }
#section2 { background-color: #0cf; }
#section3 { background-color: #fc0; }

let currentSection = 0;
const sections = document.querySelectorAll('.section');
const totalSections = sections.length;

function scrollToSection(index) {
    window.scrollTo({
        top: index * window.innerHeight,
        behavior: 'smooth' // 平滑滚动
    });
    currentSection = index;
}

window.addEventListener('wheel', (event) => {
    if (event.deltaY > 0) { // 向下滚动
        if (currentSection < totalSections - 1) {
            scrollToSection(currentSection + 1);
        }
    } else { // 向上滚动
        if (currentSection > 0) {
            scrollToSection(currentSection - 1);
        }
    }
});

// 初始化时滚动到第一屏
window.scrollTo({ top: 0, behavior: 'smooth' });