html - 如何防止滚动整个页面？

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

希望这能解决您的问题:)