0
400
ViewsVuetify appbar double scrollbar
I am currently trying to develop an app with vuetify. However i can not get the scroll threshold appbar to work correctly. If I get the content placed correctly then the shrink on scroll doesn't work correctly, and vice-versa. I managed to get the content and scroll bar positioned in relation to each other but now there is a large amount of blankspace under the footer and the app is using the vuetify scroll bar and not the browser scroll bar.
Here is my App.vue
<template>
<v-app>
<v-app-bar
app
style="position:fixed"
absolute
color="#43a047"
dark
shrink-on-scroll
prominent
src="https://picsum.photos/1920/1080?random"
fade-img-on-scroll
scroll-target="#scrolling-techniques-5"
scroll-threshold="500"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)"
></v-img>
</template>
<!-- -->
</v-app-bar>
<v-sheet
id="scrolling-techniques-5"
class="overflow-y-auto"
max-height="600"
>
<v-container fluid style="height: 1500px;">
<v-main>
<router-view></router-view>
</v-main>
</v-container>
</v-sheet>
<!-- Sizes your content based upon application components -->
<v-footer
color="primary lighten-1"
padless
>
<v-row
justify="center"
no-gutters
>
<v-btn
v-for="link in links"
:key="link"
color="white"
text
rounded
class="my-2"
>
{{ link }}
</v-btn>
<v-col
class="primary lighten-2 py-4 text-center white--text"
cols="12"
>
{{ new Date().getFullYear() }} — <strong>Vuetify</strong>
</v-col>
</v-row>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
links: [
'Home',
'About Us',
'Team',
'Services',
'Blog',
'Contact Us',
],
}),
}
</script>Any help would be greatly appreciated!
·
Juan Pablo Isaza
1 answers
Answer question0
Remove the height height: 1500px on the v-container
<v-sheet
id="scrolling-techniques-5"
class="overflow-y-auto"
max-height="600"
>
<v-container fluid>
<v-main>
<router-view></router-view>
</v-main>
</v-container>
</v-sheet>
·
Juan Pablo Isaza
Report
Answer question