设置Main容器为100vh后无法滚动，滚动吸附跨浏览器失效求助

针对你遇到的Chrome无法滚动、Safari正常的情况，核心问题出在子元素的冗余滚动设置和浏览器对滚动容器的优先级处理差异，以下是具体解决思路：

1. 移除子元素的冲突滚动配置 #

子组件.section中设置的scroll-snap-type: y mandatory和overflow-y: scroll是冗余且冲突的：

• scroll-snap-type只需要在**滚动容器（即父元素.main）**上设置即可，子元素重复设置会干扰Chrome的滚动判断
• overflow-y: scroll会让子元素自身成为独立滚动容器，抢走父容器的滚动事件

修改后的.section样式：

.section {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* 可选：添加box-sizing确保高度计算准确 */
    box-sizing: border-box;
}

2. 重置全局基础样式，避免滚动容器冲突 #

Chrome对页面默认的html/body边距、高度处理可能影响父容器的滚动触发，添加全局样式重置：

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

这样可以确保.main是页面唯一的滚动容器，避免浏览器默认滚动行为干扰。

3. 优化父容器的高度设置（可选） #

部分场景下，Chrome对100vh的计算会受浏览器工具栏影响，可尝试用min-height: 100vh替代height: 100vh，确保容器高度足够容纳所有子元素：

.main {
    min-height: 100vh;
    overflow: auto;
    scroll-snap-type: y mandatory;
}

4. 添加兼容性前缀（可选） #

虽然现代浏览器已支持标准scroll-snap属性，但为了兼容旧版Chrome，可添加webkit前缀：

.main {
    min-height: 100vh;
    overflow: auto;
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
}

.section {
    /* 其他样式 */
    -webkit-scroll-snap-align: start;
    scroll-snap-align: start;
    -webkit-scroll-snap-stop: always;
    scroll-snap-stop: always;
}

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