水平scroll snap切换为垂直scroll snap不生效，调整x/y属性无效

CSS 滚动吸附的生效有个硬前提：scroll-snap-type 必须定义在实际承载滚动行为的容器上，容器本身需要具备独立的滚动逻辑，子元素的scroll-snap-align属性才会被识别触发。
对照你当前的修改代码，存在几个直接导致功能失效的配置缺失：

• 未给.slides容器配置垂直滚动触发规则：你只在这个类上加了scroll-snap-type: y mandatory，但没有加overflow-y: scroll，导致这个容器本身根本不会成为独立的垂直滚动载体，实际滚动行为是在浏览器body层发生，吸附规则和实际滚动容器完全错位，自然不生效。
• .slides容器没有明确的高度约束：默认状态下容器会跟随内部每个100vh的section内容无限拉高，没有高度上限就不会触发自身的滚动条，不存在容器内部的滚动行为，吸附逻辑也就没有触发的载体。
• 布局属性漏配：原水平版本中，.slides通过横向display: flex让多个section横向排列，你改垂直版本时删掉了这个布局属性，也没有替换为适合垂直排列的配置；同时section元素上删掉了display: flex，只保留的align-items和justify-content在普通块级元素上完全不生效，导致section内部的文字无法居中。
• 滚动容器错配：目前的代码结构里，scroll-snap-type写在.slides上，但滚动实际是在body上完成，两边规则不匹配，是功能失效的核心原因。

修复后可直接运行的完整CSS #

/* 隐藏不需要的滚动条 */
body {
  overflow: hidden;
  margin: 0; /* 清除浏览器默认body边距，避免布局偏移 */
}

.slides {
  /* 垂直方向强制吸附规则 */
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  /* 核心：将容器设为满屏高度，成为独立垂直滚动容器 */
  height: 100vh;
  /* 开启容器自身的垂直滚动，让滚动行为和吸附规则绑定在同一个元素上 */
  overflow-y: scroll;
  /* 垂直布局让section沿纵向依次排列 */
  display: flex;
  flex-direction: column;
}

section {
  height: 100vh;
  min-width: 100vw;
  /* 恢复flex布局，实现内部文字的居中效果 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 吸附对齐位置 */
  scroll-snap-align: start;
}

/* 原有样式无需改动 */
section h2 {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  color: #1a1a1a;
  font-weight: 100;
  margin: 0;
}

section h3 {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  color: #ffffff;
  font-weight: 100;
  margin: 0;
}

.section-1 {
  background-image: url('https://images.unsplash.com/photo-1524260855046-f743b3cdad07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1401&q=80')
}

.section-2 {
  background-image: url('https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')
}

.section-3 {
  background-image: url('https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1378&q=80')
}

.section-4 {
  background-image: url('https://images.unsplash.com/photo-1501791330673-603715379ded?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')
}

补充说明：如果不需要把.slides做成独立滚动容器，想直接用浏览器默认的body滚动实现垂直吸附，也可以直接把scroll-snap-type: y mandatory写到body的样式里，删掉.slides的高度限制、overflow-y: scroll配置，让section自然在文档流中纵向排列即可，两种方式的最终吸附效果完全一致。

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