CSS滚动吸附如何设置初始可见元素为第N个并支持左右滑动

前置配置修正 #

当前代码存在两个基础问题需要先调整，否则吸附效果无法正常触发：

• 横向滚动容器.horizontal-snap原本设置的是overflow-y: auto，横向滚动场景下必须配置为overflow-x: auto，否则scroll-snap-type: x mandatory的强制吸附规则完全不会生效。
• .slide规则里的object-fit: contain是针对图片、视频这类替换元素的属性，用在普通div上没有任何实际作用，可以直接删除。

优先纯CSS实现 #

不需要额外引入JavaScript，仅通过原生CSS属性即可实现初始定位：

• 调整滑动区块的吸附对齐规则，将原本的scroll-snap-align: center改为scroll-snap-align: start，确保每个区块的左边缘和容器可视区左边缘精准对齐，不会出现吸附位置偏移。
• 给滚动容器新增scroll-start属性，直接指定横向方向的初始滚动偏移为100vw，刚好对齐第二个.fridge区块的位置。

修正后的核心CSS代码：

.horizontal-snap {
    display: grid;
    grid-auto-flow: column;
    width: 100vw;
    height: 100vh;
    overflow-x: auto; /* 修正原有的overflow-y配置错误 */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-start: x 100vw; /* 纯CSS指定初始横向滚动位置，停在第二个fridge区块 */
    scroll-behavior: smooth; /* 保留滑动切换的平滑过渡效果 */
}

.horizontal-snap .slide {
    scroll-snap-align: start; /* 把原有的center改为start，保证吸附对齐精准 */
    width: 100vw;
    height: 100vh;
    max-width: none;
}

该实现下所有吸附交互完全保留：初始加载直接停在.fridge区块，向左滑动自动吸附到.shop区块，向右滑动自动吸附到.recipe区块，滑动过程不会出现卡在两个区块中间的情况。

低版本浏览器兼容方案 #

如果需要兼容不支持scroll-start属性的老版本浏览器，可以用极少量JS做初始定位兜底，完全不改动原有吸附逻辑：
在页面所有DOM元素渲染完成后，将滚动容器的横向偏移量设置为.fridge元素对应的左偏移值即可，实现代码：

document.addEventListener('DOMContentLoaded', () => {
    const scrollWrapper = document.querySelector('.horizontal-snap');
    const targetSlide = document.querySelector('.fridge');
    // 即时滚动到目标位置，无初始跳转动画
    scrollWrapper.scrollTo({
        left: targetSlide.offsetLeft,
        behavior: 'instant'
    });
});

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