在 <v-row> 之间捕捉

Question

      <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>

具有以下容器结构，有两行（每行覆盖全屏），我希望能够在它们之间立即滚动。我尝试用带有 ScrollIntoView() 的 JS 来完成它，但是那没有正常工作。

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

Answer 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>

在 <v-row> 之间捕捉

Snap between <v-row>'s

css

scroll

vue.js

vuetify.js