Snap between <v-row>'s-CodePudding

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

Having the following container structure, with two rows (each covering full screen), I would love to be able to instantly scroll between these. I tried to do it with JS with ScrollIntoView(), but that didn't work properly.

Something similar can be seen in this example, although I was not able to do it with CSS either. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts

CodePudding user response：

It depends on your design and the container which wraps your v-container (and your v-app) but this example should be a good start :

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/[email protected]/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/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify()
    })
  </script>
</body>

</html>