在 <v-row> 之间对齐答案

【问题标题】：Snap between <v-row>'s在 <v-row> 之间对齐
【发布时间】：2021-12-14 14:07:06
【问题描述】：

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

具有以下容器结构，有两行（每行覆盖全屏），我希望能够在这些之间立即滚动。我尝试用 JS 和 ScrollIntoView() 来做，但没有正常工作。

在这个例子中可以看到类似的东西，虽然我也不能用 CSS 做到这一点。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts

【问题讨论】：

标签： css vue.js scroll vuetify.js

【解决方案1】：

这取决于你的设计和包装你的v-container（和你的v-app）的容器，但是这个例子应该是一个好的开始：

html {
  scroll-snap-type: y mandatory;
}
.row {
  scroll-snap-align: start;
}
.email-block {
  background-color: #456
}
.map-block {
  background-color: #654
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container class="scroller" fluid>
          <v-row class="email-block"
                 style="height: 100vh;">e-mail block</v-row>
          <v-row class="map-block"
                 style="height: 100vh;">map-block</v-row>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify()
    })
  </script>
</body>

</html>

【讨论】：

不得不将 scroll-snap-align: end; 替换为顶部，否则效果很好。谢谢。