如何正确配置CSS Vertical scroll snap垂直滚动捕捉功能

问题修复方案 #

你的滚动捕捉失效核心是2个必要配置缺失，外加冗余属性干扰，调整如下：

• 滚动容器.content未设置overflow-y: scroll，滚动行为实际触发在body元素上，绑定在.content上的滚动捕捉规则无法生效
• .content设置高度为100%，但它的父元素html、body都没有明确设置高度为100%，导致.content高度无法匹配视口高度
• 冗余属性：scroll-snap-points-y是旧规范废弃属性无需使用，重复声明的scroll-snap-type可以合并

修正后的完整CSS代码

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: white;
}

body .content {
  width: 100vw;
  height: 100%;
  overflow-y: scroll; /* 新增：让容器自身支持滚动 */
  scroll-snap-type: y mandatory;
}

body .content section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  scroll-snap-align: start;
}

HTML结构无需修改，调整后即可实现整屏垂直滚动捕捉效果。如果需要隐藏滚动条，可给.content额外添加以下属性：

/* 适配webkit内核浏览器（Chrome、Edge、Safari等） */
body .content::-webkit-scrollbar {
  display: none;
}
/* 适配火狐浏览器 */
body .content {
  scrollbar-width: none;
}

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