如何防止滚动整个页面？

Question

我有一个基于vue和vuetify的页面，如下所示：

Vue.config.productionTip = false

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

body {
overflow: hidden;
height: 100vh;
}

.stretch {
  height: 100%;
  width: 100%;
}

.output {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-app-bar color="deep-purple accent-4" dark app>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>


    </v-app-bar>

    <!-- Sizes your content based upon application components -->
    <v-content>

      <div class="d-flex pt-8 flex-column align-center stretch">
        <div class="d-flex mb-4 flex-row">
          <v-card tile max-width="280" class="mx-auto ml-5">
            <v-list-item>
              <v-list-item-icon>
                <v-icon class="pl-4" large color="deep-purple darken-2">mdi-clipboard-text</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Logs</v-list-item-title>

                <v-list-item-subtitle>Overview of all logs</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row justify="center" no-gutters>
                <v-col cols="3">
                  <v-icon color="red darken-4">mdi-checkbox-blank-circle</v-icon>
                </v-col>

                <v-col cols="5">
                  <p>1111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="3">
                  <v-icon color="orange darken-2">mdi-checkbox-blank-circle</v-icon>
                </v-col>

                <v-col cols="5">
                  <p>1111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="3">
                  <v-icon color="green darken-4">mdi-checkbox-blank-circle</v-icon>
                </v-col>

                <v-col cols="5">
                  <p>111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>

        </div>
        <div class="d-flex flex-column output">
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
<v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
        </div>
      </div>

    </v-content>
  </v-app>
</div>

我要存档的是：

要禁用带有红色边框标记的滚动批量，而仅启用带有绿色边框标记的滚动批量。

如何做到？

Answer 1

嗯，试试CSS：

body {
    overflow: hidden;
    height: 100vh;
}

希望可以解决您的问题：）