HTML/CSS滚动吸附（scroll snap）多场景异常问题求助

问题根源 #

1. WordPress.com自带主题会给html/body或容器元素添加默认margin/padding，干扰滚动容器的尺寸计算
2. 旧属性scroll-snap-points-y与现代滚动吸附规范冲突，导致浏览器解析异常
3. Edge浏览器的默认滚动条会占用视口宽度，造成区块切换时的偏移
4. 未统一设置box-sizing，导致元素实际高度超出预期

修复后的代码 #

<html style="margin: 0; padding: 0; height: 100%;">
<body style="margin: 0; padding: 0; height: 100%; overflow: hidden;">
<div class="scrollcontainer" style="scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; width: 100%; box-sizing: border-box; overflow-x: hidden; --snap-height: 100vh; --snap-align: start;">
  <section class="scrollchild" style="scroll-snap-align: var(--snap-align); background-color: #eeeeee; height: var(--snap-height); box-sizing: border-box; padding-right: calc(100vw - 100%); margin: 0; padding-left: 0;">
    <p style="padding: 0; margin: 0;">one</p>
  </section>
  <section class="scrollchild" style="scroll-snap-align: var(--snap-align); background-color: #aaaaaa; height: var(--snap-height); box-sizing: border-box; padding-right: calc(100vw - 100%); margin: 0; padding-left: 0;">
    <p style="padding: 0; margin: 0;">two</p>
  </section>
  <section class="scrollchild" style="scroll-snap-align: var(--snap-align); background-color: #777777; height: var(--snap-height); box-sizing: border-box; padding-right: calc(100vw - 100%); margin: 0; padding-left: 0;">
    <p style="padding: 0; margin: 0;">three</p>
  </section>
</div>
</body>
</html>

关键修复说明 #

• 强制重置html/body的margin/padding并设置height:100%，消除主题默认样式干扰；给body加overflow:hidden避免双重滚动条
• 移除过时的scroll-snap-points-y，仅保留现代标准属性scroll-snap-type: y mandatory，配合子元素的scroll-snap-align实现吸附
• 用calc(100vw - 100%)自动抵消滚动条宽度，解决Edge的偏移问题
• 全局设置box-sizing: border-box，确保元素尺寸不受padding/border影响
• 明确设置overflow-x: hidden，防止水平滚动破坏垂直吸附逻辑

代码优化建议 #

• 使用CSS变量--snap-height/--snap-align统一管理重复属性，减少冗余代码，后续修改只需调整容器的变量值
• 给子元素统一添加margin:0; padding-left:0，避免WordPress主题给section标签添加默认间距
• 若需要平滑滚动，可给滚动容器添加scroll-behavior: smooth;内联样式（现代浏览器均支持）

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