Vuetify移动端侧边栏滚动跳动问题求助及解决方案咨询

网站移动端版本的橙色侧边栏，在浏览器向下滚动时，页面导航栏和页脚会动态显示/隐藏，导致按住手指滚动时侧边栏出现明显卡顿。以下是侧边栏组件代码：

<template>
  <v-main style="overflow: hidden; !important; ">
    <v-navigation-drawer
        app
        permanent
        style=" z-index: 5;"
        height="100%"
        :width="check"
        v-bind:style="miniFied ? 'v-navigation-drawer--mini-variant {overflow: hidden;} ' : null"
        :mini-variant="miniFied"
        class="pt-14 amber darken-1"
    >
      <v-list>
        <v-btn
            icon
            @click.stop="miniFied = !miniFied"
        >
          <v-icon v-if="!miniFied">mdi-chevron-left</v-icon>
          <v-icon v-else>mdi-chevron-right</v-icon>
        </v-btn>
        <v-list-item class="px-2" v-if="!miniFied">
          <v-img :src="require('@/assets/logo.webp')"
                 max-height="80"
                 max-width="70"
                 class="mx-auto">
          </v-img>
        </v-list-item>
        <v-container v-if="user.nameSurname" class="pa-0 ma-0">
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title v-if="!miniFied" style="font-size: 20px" class="text-center">
                {{ user.nameSurname }}
              </v-list-item-title>
              <v-list-item-subtitle class="text-center" v-if="!mini">{{ user.email }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-container>
        <v-container v-else class="pa-0">
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title v-if="!miniFied" class="text-h6 text-center">
                <v-btn :to="{ path: '/register' }" dark>
                  Register
                </v-btn>
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-container>
        <v-container class="pa-0 ma-0">
        <v-list-item v-if="user.ipCount && user.role === 'ADMIN' || user.role === 'SUPER_ADMIN' && !miniFied"
        class="ma-0 pa-0">
          <v-list-item-content>
            <v-list-item class="justify-center pa-0"
                          >
              <span class="text-center text-subtitle-2">Total Unique IPs: {{ user.ipCount }}</span>
            </v-list-item>
          </v-list-item-content>
        </v-list-item>
        </v-container>
      </v-list>
      <v-divider></v-divider>
      <v-list
          nav
          dense
      >
        <v-list-item-group
            light
            class="pb-16 text-left"
            :value="selected"
            color="primary"
        >
          <v-list-item link @click="clickedMenuItem('superior-predictions')" :disabled="selectedItem === 0">
            <v-list-item-icon>
              <v-icon>mdi-home</v-icon>
            </v-list-item-icon>
            <v-list-item-title style="font-size: 17px">Dashboard</v-list-item-title>
          </v-list-item>
          <v-list-item link @click="clickedMenuItem('history')" :disabled="selectedItem === 1">
            <v-list-item-icon>
              <v-icon>mdi-history</v-icon>
            </v-list-item-icon>
            <v-list-item-title style="font-size: 17px">Prediction History</v-list-item-title>
          </v-list-item>
          <v-list-item link @click="clickedMenuItem('bank')" :disabled="selectedItem === 2">
            <v-list-item-icon>
              <v-icon>mdi-bank</v-icon>
            </v-list-item-icon>
            <v-list-item-title style="font-size: 17px">Virtual Bank</v-list-item-title>
          </v-list-item>
          <v-list-item link @click="clickedMenuItem('charts')" :disabled="selectedItem === 3">
            <v-list-item-icon>
              <v-icon>mdi-chart-bell-curve-cumulative</v-icon>
            </v-list-item-icon>
            <v-list-item-title style="font-size: 17px">Charts</v-list-item-title>
          </v-list-item>
          <v-list-item link
                       href="https://superiorprediction.com/blog"
                       target="_blank">
            <v-list-item-icon>
              <v-icon>mdi-newspaper-variant-outline</v-icon>
            </v-list-item-icon>
            <v-list-item-title style="font-size: 17px">Blog - Latest News</v-list-item-title>
          </v-list-item>
          <v-list-item v-if="loggedIn" link @click="clickedMenuItem('profile')" :disabled="selectedItem === 4">
            <v-list-item-icon>
              <v-icon>mdi-account</v-icon>
            </v-list-item-icon>
            <v-list-item-title style="font-size: 17px">My Profile</v-list-item-title>
          </v-list-item>
          <v-list-item v-if="user.role === 'ADMIN' || user.role === 'SUPER_ADMIN'" link
                       @click="clickedMenuItem('admin-panel')" :disabled="selectedItem === 5">
            <v-list-item-icon>
              <v-icon>mdi-solar-panel</v-icon>
            </v-list-item-icon>
            <v-list-item-title style="font-size: 17px">Admin Panel</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
      <template v-slot:append style="height: 100% !important;">
        <div class="pb-5">
          <v-dialog
              transition="dialog-bottom-transition"
              max-width="600"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-list-item link v-bind="attrs"
                           v-on="on"
              >
                <v-list-item-icon>
                  <v-icon color="blue darken-3">mdi-send</v-icon>
                </v-list-item-icon>
                <v-list-item-title style="font-size: 17px" class="text-left">Join Telegram</v-list-item-title>
              </v-list-item>
            </template>
            <template v-slot:default="dialog">
              <v-card>
                <v-card-text class="pa-10 text-center">
                  <v-img :src="require('@/assets/telegram.webp')"
                         max-height="200"
                         max-width="200"
                         class="mx-auto"
                  ></v-img>
                  <span class="text-h6 ">Get free predictions now!</span>
                  <v-card-text>
                    <v-btn color="primary" class="btn btn-info text-white "
                           href="https://t.me/+nHbAu6aUFLsxZjY0" target="_blank">
                      Join
                    </v-btn>
                  </v-card-text>
                </v-card-text>
                <v-card-actions class="justify-end">
                  <v-btn
                      color="amber darken-1"
                      @click="dialog.value = false"
                  >Close
                  </v-btn>
                </v-card-actions>
              </v-card>
            </template>
          </v-dialog>
          <v-dialog
              transition="dialog-bottom-transition"
              max-width="600"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-list-item link v-bind="attrs"
                           v-on="on">
                <v-list-item-icon>
                  <v-icon color="black">mdi-gift</v-icon>
                </v-list-item-icon>
                <v-list-item-title style="font-size: 17px" class="text-left">Donate Paypal</v-list-item-title>
              </v-list-item>
            </template>
            <template v-slot:default="dialog">
              <v-card>
                <v-img :src="require('@/assets/paypal.webp')"
                       max-height="140"
                       max-width="340"
                       class="mx-auto text-left"
                >
                </v-img>
                <v-card-text class="pa-7 text-center">
                  <v-btn color="primary" href="https://www.paypal.com/paypalme/superiorprediction">Donate Link
                  </v-btn>
                </v-card-text>
                <v-card-actions class="justify-end">
                  <v-spacer></v-spacer>
                  <v-btn
                      color="amber darken-1"
                      @click="dialog.value = false"
                  >Close
                  </v-btn>
                </v-card-actions>
              </v-card>
            </template>
          </v-dialog>
          <v-dialog
              transition="dialog-bottom-transition"
              max-width="600"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-list-item link v-bind="attrs"
                           v-on="on">
                <v-list-item-icon>
                  <v-icon color="grey darken-4">mdi-gift</v-icon>
                </v-list-item-icon>
                <v-list-item-title style="font-size: 17px" class="text-left">Donate BTC</v-list-item-title>
              </v-list-item>
            </template>
            <template v-slot:default="dialog">
              <v-card>
                <v-img :src="require('@/assets/frame.png')"
                       max-height="200"
                       max-width="200"
                       class="mx-auto pa-0"
                >
                </v-img>
                <v-card-text class="pb-5 text-center">
                  <span class="text-h6 ">Donate BTC Address: {{ donateAddress }}</span>
                  <input type="hidden" id="donate-address" :value="donateAddress">
                </v-card-text>
                <v-card-actions class="justify-end">
                  <v-btn color="primary" class="btn btn-info text-white copy-btn "
                         @click.stop.prevent="copyTestingCode">
                    Copy
                  </v-btn>
                  <v-spacer></v-spacer>
                  <v-btn
                      color="amber darken-1"
                      @click="dialog.value = false"
                  >Close
                  </v-btn>
                </v-card-actions>
              </v-card>
            </template>
          </v-dialog>
        </div>
      </template>
    </v-navigation-drawer>
  </v-main>
</template>

问题根源 #

1. 样式语法错误：v-main的overflow: hidden; !important;写法无效，!important位置错误导致滚动容器异常
2. 固定侧边栏冲突：permanent属性让侧边栏强制固定显示，和导航栏/页脚的动态显示逻辑冲突，触发频繁重排
3. 动态样式绑定错误：v-bind:style传入字符串而非对象，无法正确应用mini变体样式
4. 冗余高度设置：手动设置height="100%"和Vuetify内置布局逻辑冲突，导致布局偏移

修复方案 #

1. 修正基础样式错误 #

把v-main的样式改为正确写法：

<v-main style="overflow: hidden !important;">

或更规范的方式，移到