CSS full page scroll整页滚动效果失效，求问题排查思路

问题修复方案 #

• 核心错误是scroll-snap-type属性配置不全，该属性需要同时指定滚动方向和吸附规则两个参数，你当前只写了吸附规则mandatory，没有指定y轴滚动方向，导致吸附规则不生效
• 缺少全局样式重置，浏览器默认给body添加的外边距会导致滚动容器高度计算异常，需要先重置html、body的默认边距和高度
• 可以额外添加scroll-behavior: smooth属性实现滚动时的平滑过渡效果

修正后的完整CSS代码

/* 先重置全局默认样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.thepage {
  height: 100vh;
  /* 同时指定y轴方向 + 强制吸附规则 */
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  /* 可选：添加平滑滚动效果 */
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}

.bg {
  background-image: url("pic.png");
  overflow: hidden;
}

你的HTML结构不需要修改，替换CSS后即可实现正常的整页滚动吸附效果。如果仍然有问题，可以检查是否有其他父级元素设置了overflow: hidden属性拦截了滚动事件。

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