能否为不同子元素设置混合的CSS scroll-snap-type类型？

目前CSS的scroll-snap特性仅支持proximity或mandatory这两种scroll-snap-type类型，容器内所有子元素的滚动捕捉行为都会统一遵循这一设定。请问能否实现混合规则——让部分子元素采用mandatory，另一部分采用proximity？

原生CSS并没有直接为单个子元素指定不同滚动捕捉类型的属性，因为scroll-snap-type是作用在滚动容器上的，容器内所有设置了scroll-snap-align的子元素都会继承容器的捕捉规则。但可以通过嵌套滚动容器的方式间接实现混合效果：

核心思路 #

将需要不同捕捉规则的子元素分组，每组放入独立的内层滚动容器中，分别为内层容器设置mandatory或proximity，外层容器作为整体的滚动上下文。

代码示例 #

<!-- 外层滚动容器 -->
<div class="outer-container">
  <!-- 强制捕捉组 -->
  <div class="scroll-group mandatory-group">
    <div class="snap-item">强制捕捉项 1</div>
    <div class="snap-item">强制捕捉项 2</div>
  </div>
  <!-- 邻近捕捉组 -->
  <div class="scroll-group proximity-group">
    <div class="snap-item">邻近捕捉项 1</div>
    <div class="snap-item">邻近捕捉项 2</div>
  </div>
</div>

.outer-container {
  width: 300px;
  height: 500px;
  overflow-y: auto;
  padding: 10px;
}

.scroll-group {
  width: 100%;
  overflow-y: auto;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #eee;
}

/* 强制捕捉容器 */
.mandatory-group {
  scroll-snap-type: y mandatory;
  height: 220px;
}

/* 邻近捕捉容器 */
.proximity-group {
  scroll-snap-type: y proximity;
  height: 220px;
}

.snap-item {
  height: 200px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background-color: #f5f5f5;
  margin-bottom: 10px;
}

关键说明 #

• 内层容器各自拥有独立的滚动上下文，因此可以分别设置不同的scroll-snap-type，互不干扰。
• 需要注意控制内层容器的高度，避免外层与内层滚动行为冲突。
• 如果需要横向滚动，只需将y轴方向改为x即可。

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