CSS Snap Scroll鼠标滚轮滚动不流畅，键盘箭头正常的解决咨询

问题原因 #

鼠标滚轮属于离散的物理输入，浏览器为了保证滚动即时性，会优先响应滚轮的滚动增量，此时scroll-behavior: smooth的平滑效果会被忽略，导致scroll-snap直接跳转到吸附点，无过渡动画。而键盘箭头键、锚点跳转属于程序触发的滚动，浏览器会正常应用平滑配置。

解决方案 #

方案1：纯CSS优化（部分浏览器生效） #

给html补充overflow-y: scroll，明确滚动上下文，部分现代浏览器可借此将平滑滚动规则覆盖到滚轮场景：

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    height: 100vh;
    width: 100%;
    overflow-y: scroll; /* 新增属性 */
}

section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

注意：该方案仅能优化部分浏览器表现，无法保证全环境生效。

方案2：JavaScript完全控制滚动行为 #

通过拦截滚轮事件，手动计算目标吸附区域并触发平滑滚动，彻底解决滚轮滚动的平滑吸附问题：

调整后的CSS（移除原生scroll-snap）

html {
    scroll-behavior: smooth;
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
}

section {
    height: 100vh;
    width: 100%;
}

配套JavaScript代码

const sections = document.querySelectorAll('section');
let currentSectionIndex = 0;
let isScrolling = false;

window.addEventListener('wheel', (e) => {
    if (isScrolling) return;
    isScrolling = true;

    // 判断滚动方向
    const direction = e.deltaY > 0 ? 1 : -1;
    // 计算目标索引，限制边界
    const targetIndex = Math.max(0, Math.min(sections.length - 1, currentSectionIndex + direction));

    if (targetIndex === currentSectionIndex) {
        isScrolling = false;
        return;
    }

    // 平滑滚动到目标区域
    sections[targetIndex].scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });

    currentSectionIndex = targetIndex;

    // 防止连续触发滚动
    setTimeout(() => {
        isScrolling = false;
    }, 800); // 时长匹配平滑动画周期
});

方案3：保留原生Snap，补充滚轮平滑修正 #

如果希望保留原生键盘、锚点的滚动吸附行为，仅给滚轮滚动添加平滑修正，可监听滚动停止事件，自动对齐到最近吸附点：

let scrollTimeout;

window.addEventListener('scroll', () => {
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(() => {
        const sections = Array.from(document.querySelectorAll('section'));
        const currentScrollTop = window.scrollY;
        // 找到距离当前滚动位置最近的section
        const targetSection = sections.reduce((closest, section) => {
            const sectionTop = section.offsetTop;
            const distance = Math.abs(sectionTop - currentScrollTop);
            return distance < Math.abs(closest.offsetTop - currentScrollTop) ? section : closest;
        }, sections[0]);

        targetSection.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    }, 100); // 滚动停止后100ms触发修正
});

该方案保留原生scroll-snap配置，仅在滚轮滚动结束后补充平滑对齐效果。

内容的提问来源于stack exchange，提问作者Luscript