Scroll bar in the main section of a v-app

user_3048716 0
Viewed 16355

I have copied one of the pre-defined layouts from https://vuetifyjs.com/layout/pre-defined.

However when the content of the main section overflows it cause a scroll to appear for the whole app, rather than a local scroll to the main section. Here is an example:

<template>
    <v-app toolbar footer>

        <v-toolbar class="blue darken-3" dark>
        </v-toolbar>

        <v-navigation-drawer permanent clipped light absolute>
        </v-navigation-drawer>

        <main>
            <v-container>
                <p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p>
            </v-container>
        </main>
    </v-app>
</template>

I've tried adding class="scroll-y" and style="max-height: 100%" to various sections with no progress.

What do I need to specify for the scroll to only affect the main section?

vuetify.js vue.js css
5 Answers

This issue work for me, just adding 

<style>
  html { overflow-y: auto }
</style>

to your style file.

Full documentation hide scroll bar

user_108741220

I found this to work for the issue I was having: 


    html{
      overflow-y: hidden;
    }

You can put that in your App.vue file, or in the projects index.html target file

user_29468800

This solution work for me :

 mounted: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = 'auto'
  },
  destroyed: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = null
  },

Add this code in you file App.js

user_115143930

Something like this:

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

I am sure you can figure out how to implement this, you simply make sure your main parent does not scroll and apply an overflow-y to the element that you do want to scroll inside of.

user_22942250

look for index.html in your files and open it, then add to the bottom of it:

html{
  overflow-y: hidden;
}
user_164031140
Related