Scroll Snap功能失效问题求助（网页作品集开发新手）

你的Scroll Snap功能未生效，核心原因是未给滚动容器配置滚动捕捉的关键属性，同时存在几个细节问题，以下是具体修复方案：

1. 核心CSS调整 #

给滚动容器.scrolldiv添加滚动捕捉规则，同时统一视频区域的样式：

/* 重置body默认样式，避免滚动异常 */
body {
  background-color: black;
  margin: 0;
  overflow: hidden; /* 让.scrolldiv成为唯一滚动容器 */
}

/* 滚动容器核心设置 */
.scrolldiv {
  height: calc(100vh - 8vh); /* 减去header高度，避免内容被遮挡 */
  overflow-y: scroll; /* 开启垂直滚动 */
  scroll-snap-type: y mandatory; /* 强制垂直方向滚动捕捉 */
  margin-top: 8vh; /* 对应header高度，让内容从header下方开始 */
}

/* 统一所有视频区域的滚动捕捉规则 */
.vidarea1, .vidarea2, .vidarea3, .vidarea4 {
  width: 100%;
  height: 100%; /* 匹配容器高度 */
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start; /* 滚动时对齐区域顶部 */
  position: relative;
}

/* 调整视频铺满容器 */
.vid1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

2. HTML细节修复 #

所有视频的id="myVideo"重复了，ID必须唯一，建议改为类名：

<section class="vidarea1">
  <video autoplay muted loop class="vid1">
    <source src="vids/svid.mp4" type="video/mp4">
  </video>
</section>

3. 额外优化 #

• 给.scrolldiv添加scroll-behavior: smooth;可实现平滑滚动过渡
• 现代浏览器原生支持Scroll Snap，学校项目无需额外兼容处理

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