scroll-snap全屏失效求助：100vh容器滚动吸附功能无法实现

我来帮你排查下scroll-snap不生效的常见原因，你可以逐个测试调整：

• 滚动容器的设置可能需要调整
  有些浏览器对body作为滚动容器的支持有细微差异，建议把scroll-snap-type同时应用在html和body上，并且显式设置滚动相关属性：

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-scroll-snap-type: y mandatory; /* 兼容部分旧版webkit内核浏览器 */
  }
  

• 确认滚动容器的层级
  如果你的.box元素被包裹在另一个容器（比如一个div）里，那scroll-snap-type应该设置在实际承载滚动的容器上，而不是body。比如如果内部容器是滚动区域，需要给它设置：

  .scroll-container {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }
  

  同时确保.box直接作为这个容器的子元素。

• 修复元素高度溢出问题
  检查.box是否因为padding或border导致实际高度超过100vh，这会破坏滚动吸附的计算。添加box-sizing: border-box确保元素尺寸包含内边距和边框：

  .box {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top center;
    text-align: center;
    position: relative;
    scroll-snap-align: start;
    -webkit-scroll-snap-align: start; /* 兼容前缀 */
  }
  

• 排查滚动事件拦截
  如果页面中有JavaScript代码阻止了默认滚动行为（比如自定义滚动插件、触摸事件处理），会导致scroll-snap失效。可以暂时移除页面中的JS代码，测试基础的CSS滚动吸附是否生效。

先试试上面的前两个调整，这是最常见的解决场景，应该能解决你的问题。

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