为何scroll-snap-type在自定义容器不生效？如何实现混合滚动？

• 滚动吸附规则仅作用于设置了scroll-snap-type属性的滚动容器本身：第一段代码生效是因为html、body是页面的根滚动容器，滚动行为直接发生在这两个元素上，吸附规则会被触发。
• 自定义.slider容器默认不是滚动容器：你滚动页面时，实际滚动的还是根容器，.slider只是跟随页面移动的普通元素，给它设置的scroll-snap-type自然不会生效。
• 之前调整高度和overflow没生效大概率是规则配置不全：要让元素成为独立滚动容器，必须同时配置固定高度 + overflow-y: scroll/auto，两个条件缺一不可，同时要注意子元素高度不能和容器高度冲突，避免吸附定位不准。

根据需求，推荐两种实现方式，可根据交互场景选择：

方案1：页面连贯滚动，到吸附区域自动生效（推荐，交互更顺畅） #

这种方案保留整个页面的连贯滚动逻辑，仅给需要吸附的子元素开启吸附规则，普通区域不受影响：

/* 给根滚动容器开启全局吸附 */
html, body {
  margin: 0;
  scroll-snap-type: y mandatory;
}

/* 普通区域元素禁用吸附，避免普通内容也触发吸附 */
h2, p {
  scroll-snap-align: none;
}

/* 仅给slider内的子元素开启吸附 */
.slider .child {
  scroll-snap-align: start;
  border: 1px solid black;
  height: 100vh;
  /* 避免边框撑高元素导致吸附错位 */
  box-sizing: border-box;
}

HTML代码不需要修改，直接复用你提供的结构即可。

方案2：slider为独立滚动区域 #

如果需要slider是独立的滚动区块，只有在slider内部滚动时才触发吸附，可使用该方案：

.slider {
  /* 固定容器高度，同时开启纵向滚动 */
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.slider .child {
  scroll-snap-align: start;
  border: 1px solid black;
  height: 100vh;
  box-sizing: border-box;
}

注意该方案下，页面滚动到slider区域后，需要将鼠标悬停在slider区域内滚动才会触发吸附，和普通页面滚动逻辑有差异。

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