やりたいこと

業務で以下のような
ボタン押下で「overflow-y:auto」と「height」が効いている
divタグ内でスクロールさせたい要望があり、多少詰まったが解決したのでメモ

やっていること

$vuetify.goTo()の第一引数に移動先の要素、第二引数に
移動先の要素を囲っている親要素を指定するとうまくいく。

コード例

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
    }
  },
  mounted() {
  },
  methods: {
    scrollToSection(number) {
      // 移動先親要素
      const container = document.querySelector('.scroll-container');
      const el = document.getElementById('card'+number);
      this.$vuetify.goTo(el,{container:container});
    }
  }
})

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-row>
        <v-col id="button">
          <v-btn  @click="scrollToSection(1)">カード1</v-btn>
          <v-btn  @click="scrollToSection(2)">カード2</v-btn>
          <v-btn  @click="scrollToSection(3)">カード3</v-btn>
          <v-btn  @click="scrollToSection(4)">カード4</v-btn>
          <v-btn  @click="scrollToSection(5)">カード5</v-btn>
        </v-col>
      </v-row>
      <v-row class="border scroll-container">
        　<v-col>
        <v-card id="card1" class="mb-3" height="200">
          カード1
        </v-card>
        <v-card id="card2" class="mb-3" height="200">
          カード2
        </v-card>
           <v-card id="card3" class="mb-3" height="200">
          カード3
        </v-card>
           <v-card id="card4" class="mb-3" height="200">
          カード4
        </v-card>
           <v-card id="card5" class="mb-3" height="200">
          カード5
        </v-card>
        　</v-col>
        </v-row>
    </v-container>
  </v-app>
</div>

<style>
.border{
  border:solid;
}
.scroll-container {
  height: 70vh;
  overflow-y: scroll;
}
</style>

補足

クラス指定でheightとoverflow-y: scrollを指定
している要素を取らないとうまく動作しない。

参考文献