使用触摸板双指滚动时scroll-snap效果失效问题求助

你的核心问题是触摸板双指滚动的动量特性与scroll-snap的触发逻辑冲突，导致吸附效果失效。以下是针对性的修复方案：

1. 移除平滑滚动行为 #

scroll-behavior: smooth会干扰scroll-snap的触发优先级，尤其是在触摸板的动量滚动场景下，浏览器会优先处理平滑滚动动画，跳过吸附逻辑。直接移除body中的该属性：

body {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    /* 移除 scroll-behavior: smooth */
  
    color-scheme: light dark;
    background-image: radial-gradient(at center, #0d1d31 0%, #0c0d13 100%);
  
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

2. 强制滚动停靠每个吸附点 #

给每个.step元素添加scroll-snap-stop: always，强制浏览器在滚动过程中必须停靠每个吸附位置，不能跳过：

.step {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* 添加这行 */
    box-sizing: border-box; /* 防止内边距撑高元素，确保高度严格为100vh */
}

3. 优化容器滚动设置 #

保留-webkit-overflow-scrolling: touch的同时，确保容器没有额外的滚动干扰。目前你的结构中body设置了overflow: hidden，scroll-container独立承担滚动，这个结构是合理的，无需调整。

额外调试建议 #

• 检查是否有JavaScript代码监听scroll事件并调用preventDefault()，这会阻止原生的scroll-snap行为。
• 测试不同浏览器：部分旧版WebKit内核浏览器对scroll-snap的支持存在兼容性问题，确保使用最新版Chrome、Edge或Safari。

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