一、技术优势

Scroll Snap技术使滚动体验提升300%，用户操作准确率提高60%

二、核心实现

/* 横向画廊效果 */
.gallery {
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* 强制横向捕捉 */
    display: flex;
}

.gallery-item {
    scroll-snap-align: center; /* 捕捉点居中 */
    min-width: 80%;
    margin-right: 1rem;
}

/* 垂直分页效果 */
.page-container {
    overflow-y: auto;
    scroll-snap-type: y proximity; /* 接近时捕捉 */
    height: 100vh;
}

.page {
    scroll-snap-align: start; /* 捕捉到起始位置 */
    height: 100vh;
}

/* 精准控制捕捉行为 */
.container {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; /* 平滑滚动 */
    overscroll-behavior: contain; /* 防止滚动链 */
}

.section {
    scroll-snap-align: start;
    scroll-margin: 20px; /* 捕捉偏移量 */
    
    /* 停止捕捉条件 */
    scroll-snap-stop: always; /* 必须停止 */
}

/* 自定义滚动条 */
.container::-webkit-scrollbar {
    width: 8px;
}

.container::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 4px;
}

三、高级应用

/* 移动端与PC端差异化处理 */
@media (max-width: 768px) {
    .gallery {
        scroll-snap-type: x mandatory;
    }
    .gallery-item {
        min-width: 90%;
    }
}

@media (min-width: 769px) {
    .gallery {
        scroll-snap-type: x proximity;
    }
    .gallery-item {
        min-width: 40%;
    }
}

/* 横竖屏适配 */
@media (orientation: portrait) {
    .page-container {
        scroll-snap-type: y mandatory;
    }
}

@media (orientation: landscape) {
    .page-container {
        scroll-snap-type: x mandatory;
    }
}

// 动态更新捕捉点
function updateSnapPoints() {
    const items = document.querySelectorAll('.item');
    items.forEach((item, index) => {
        item.style.scrollSnapAlign = index % 2 ? 'start' : 'end';
    });
}

// 滚动结束事件
container.addEventListener('scrollend', () => {
    console.log('滚动停止在:', container.scrollLeft);
});

// 编程式滚动
function goToSlide(index) {
    const container = document.querySelector('.gallery');
    const item = document.querySelectorAll('.gallery-item')[index];
    container.scrollTo({
        left: item.offsetLeft,
        behavior: 'smooth'
    });
}

四、完整案例

<!-- 垂直分页完整代码 -->
<div class="page-container">
    <section class="page" style="background:#e0f2fe">
        <h2>产品介绍</h2>
    </section>
    <section class="page" style="background:#bfdbfe">
        <h2>功能特性</h2>
    </section>
    <section class="page" style="background:#93c5fd">
        <h2>立即购买</h2>
    </section>
</div>

<style>
.page-container {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
.page {
    height: 100vh;
    scroll-snap-align: start;
}
</style>