scroll-snap嵌套滚动异常求助：长内容区块滚动跳转、被跳过

问题 #

在开发网站时使用scroll-snap实现区块间滚动效果，区块间滚动表现正常，但包含长内容的区块出现异常：

• 给长内容区块设置height:100vh+overflow-y:auto后，虽能实现内部滚动，但快速滚动时该区块会被跳过
• 已在父元素设置scroll-snap-stop: always，但问题依旧

简化后的HTML结构：

<div class="scrollable">
      <section class="gallery">
        <h2>Gallery image</h2>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>

      <section>
        <div class="wrapper">
          <h2>text scroll height</h2>
          <p>
            <!-- 此处为超长文本内容 --> 
           </p>
        </div>
      </section>

      <section class="footer">
        <h2>FOOTER</h2>
      </section>
  <div>

相关CSS代码：

html {
  scroll-behavior: smooth;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
}


.scrollable {
  > section {
    height: 100vh;
    padding: 6vw;
    scroll-snap-align: start;
    overflow-y: auto;
  }
}

解决方案 #

问题核心是scroll-snap容器设置错误，以及固定高度导致的滚动冲突，按以下步骤修改：

1. 调整scroll-snap作用容器 #

将scroll-snap相关属性从html移到.scrollable容器上，避免根容器与内部区块的滚动上下文冲突：

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

让.scrollable成为独立滚动容器，scroll-snap规则仅作用于该容器内的section。

2. 优化区块高度与滚动规则 #

移除区块的固定height:100vh，改用min-height:100vh，同时将scroll-snap-stop: always设置在子元素上：

.scrollable > section {
  min-height: 100vh;
  padding: 6vw;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* 该属性仅在子元素上生效 */
  overflow-y: auto;
}

• min-height:100vh：短内容区块保持全屏高度，长内容区块自然撑开
• scroll-snap-stop: always：强制滚动时停靠每个区块，避免快速滚动跳过
• overflow-y: auto：仅当区块内容超过视口时触发内部滚动

3. 清理冗余属性 #

删除html上的scroll-snap相关属性及已废弃的scroll-snap-points-y：

html {
  /* 保留全局基础样式即可 */
}

修改后的完整CSS示例 #

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

.scrollable > section {
  min-height: 100vh;
  padding: 6vw;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
}

/* 给特定区块设置自定义高度，如画廊 */
.scrollable .gallery {
  height: 200vh;
}

关键原理说明 #

• scroll-snap规则必须作用在滚动容器上，而非根元素，否则会与内部带overflow的区块产生冲突
• scroll-snap-stop: always是子元素属性，设置在父容器上无效
• min-height:100vh兼顾全屏布局与长内容的自然撑开，避免内容截断或滚动异常

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