CODEWITHSUNDEEP
cssvue.jsvuetify.js
Andy T
Andy T

Reputation: 357

Scroll bar in the main section of a v-app

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?

Upvotes: 4

Views: 18383

Answers (5)

RayKira
RayKira

Reputation: 1

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

html{
  overflow-y: hidden;
}

Upvotes: 0

alpha
alpha

Reputation: 594

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

Upvotes: 5

Wicak
Wicak

Reputation: 409

This issue work for me, just adding 

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

to your style file.

Full documentation hide scroll bar

Upvotes: 12

Ian Fabs
Ian Fabs

Reputation: 97

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

Upvotes: 6

Stephan-v
Stephan-v

Reputation: 20309

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.

Upvotes: -1

Related Questions