[Vuejs]-How to prevent scrolling the whole page in Vuetify

by

0👍

Not sure this will be helpful for you, but I actually wrote a component just recently for my vuetify based App to handle scrolling

<template>
    <div class="overflow-hidden">
        <div ref="$mainContent" class="overflow-y-auto" :style="{ 'max-height': maxHeight }">
            <slot />
        </div>
    </div>
</template>
<script>
export default {
    name: "NiceScroller",
    props: {
        sub: {
            type: String,
            default: () => "120px"
        }
    },
    computed: {
        maxHeight() {
            return `calc(100vh - ${this.sub})`;
        }
    }
};
</script>

Use it like

<nice-scroller sub="200px">
    .... content that will scroll
</nice-scroller>

sub is the amount of space for non-scrolling content (defaults to 120px in this code since that’s what works for my App)

This is actually cut down to the basics of the real code – it’s easy to add a "to top" like FAB that only appears once you’ve scrolled a certain amount for example.

Leave a comment