How to prevent scrolling the whole page?

Question

I have the following page based on vue and vuetify, that looks as follows:

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>

What I am trying to archive is:

To disable the scroll bulk, which is marked with the red border and just only enable the scroll bulk, which is marked with the green border.

How to do it?

Answer 1

Hmm, try css:

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

Hope that will solve your issue :)