16
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

タイトルバー付きでスクロールできるv-menu

Last updated at Posted at 2019-08-31

タイトルバー付きのv-menuをスクロールできるようにする時、タイトルバー部分まで一緒にスクロールしてしまって困っていました。
それを、タイトルバーは固定のまま、アイテム部分だけスクロールするように解決できたのでコードサンプルを置いておきます。

イメージ

こんな感じのものです。
スクリーンショット 2019-08-31 15.05.17.png

環境

Vuetify 2.0.11

コードサンプル

Codepen

See the Pen Scrollable menu card sample by shozzy (@shozzy) on CodePen.

###コード

Codepenそのままですが、コードをこちらにも貼っておきます。

vue.js
<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="12" sm="4" offset-sm="4">
        <v-card>
          <v-card-title class="blue white--text">
            <span class="headline">Menu</span>
          </v-card-title>
          <v-container
            id="scroll-target"
            style="max-height: 200px"
            class="overflow-y-auto"
          >
            <v-row
              v-scroll:#scroll-target="onScroll"
              align="top"
              justify="center"
            >
              <v-list width="100%" style="text-align: center">
                <v-list-item
                  v-for="(item, i) in items"
                  :key="i"
                  @click="message(item.title)"
                >
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-row>
          </v-container>
        </v-card>
      </v-col>
    </v-row>
    <v-snackbar timeout="3000" v-model="snackbar">
      {{snackbar_msg}}
    </v-snackbar>
  </v-app>
</div>
vue.js
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return{
      items: [],
      snackbar: false,
      snackbar_msg: ""
    }
  },
  methods: {
    message(msg){
      this.snackbar_msg = msg
      this.snackbar = true
    },
    createItems(amount){
      for(let i=0; i<amount; ++i){
        let hash = { title: 'Item #'+i } 
        this.items.push( hash )
      }
    }
  },
  mounted() {
    this.createItems(10)    
  }
})

16
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?