如何实现Vuetify中两个v-row区块之间的滚动吸附效果

API 探路者

2026-9-28

滚动吸附效果正确实现方案

核心实现逻辑

你之前CSS方案失效基本是因为滚动容器属性配置不全，按如下步骤配置即可生效：

1. 配置滚动父容器属性

首先确认你的滚动载体类型，给对应元素加上样式：

如果是全局页面滚动（滚动条在浏览器窗口边缘）：给html、body加样式
如果是v-main内部滚动（滚动条在v-main区域内）：给v-main加样式

/* 滚动容器通用样式 */
.scroll-parent {
  overflow-y: auto; /* 必须开启纵向滚动权限 */
  scroll-snap-type: y mandatory; /* 开启纵向强制吸附，滚动结束后必须停靠到最近的吸附点 */
  height: 100vh; /* 滚动容器必须有明确的固定高度，内部滚动场景可按需调整高度值 */
}
/* 全局滚动场景额外补充 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

2. 配置吸附子元素属性

给两个v-row区块加上如下样式：

.scroll-child {
  scroll-snap-align: start; /* 吸附规则：子元素顶部与滚动容器顶部对齐 */
  scroll-snap-stop: always; /* 可选配置：保证滚动时不会一次跳过多个吸附区块 */
}

3. 改造后的完整结构代码

<v-main class="scroll-parent">
  <v-container fluid>
    <v-row
      class="email-block scroll-child"
      style="height: calc(100vh - 130px);"
    >
      <!-- content here -->
    </v-row>
    <v-row
      class="map-block scroll-child"
      style="height: calc(100vh - 130px);"
    >
      <!-- content here -->
    </v-row>
  </v-container>
</v-main>