如何防止在Vuetify中滚动整页

Question

我正在努力防止移动设备和ipad在桌面上滚动，当我切换到移动设备和ipad时，滚动不会发生。滚动只发生在移动设备和ipad上。有人能帮我避免滚动吗。有人能帮我解决这个问题吗。

<v-card color="#1976D2" tile class="bg-color pa-0 px-2 mx-0" fluid>
    <v-container fill-height>
        <v-row class="pa-0" justify="center">
            <v-card flat color="#1976D2">
                <v-row class="mt-0" justify="left">
                    <v-avatar class="ml-5" style="background-color:#ffffff" size="70">
                        <v-img contain width="400" :height="$vuetify.breakpoint.lg
                || $vuetify.breakpoint.smOnly ? 150: 100" :src="`/img/syfol/logo.png`">
                        </v-img>
                    </v-avatar>
                </v-row>
                <v-col cols="12">
                    <div style="font-size:2em;" class="text-left white--text font-weight-bold">Syfol</div>
                    <div style="1em" class="white--text  text-left">Sign in
                    </div>
                    <div class="text-left  text-size">
                        <small class="mt-9 white--text text-size">Crack your complications with our Syfol
                            solution to get prevail in the field!
                        </small>
                    </div>
                </v-col>
                <v-col cols="12" sm="9">
                    <v-row justify="center">
                        <v-img contain width="400" :height="$vuetify.breakpoint.lg
                || $vuetify.breakpoint.smOnly ? 150: 200" :src="`/img/syfol/login-01.svg`"></v-img>
                    </v-row>
                </v-col>
                <v-col cols="12" sm="12" class="pb-lg-0 pb-0 pb-xl-2">
                    <v-row justify="center">
                        <v-col cols="12">
                            <v-btn block title='Sign in using Microsoft' class="text-primary rounded-xl text-capitalize font-weight-bold body-2 px-2" color="white" @click="getSharepointUrl" :loading="loading">
                                <v-icon color="primary" class="mr-2"> mdi-microsoft </v-icon>
                                Sign in with Microsoft
                            </v-btn>
                        </v-col>
                    </v-row>
                </v-col>
                <v-col class="pb-0 my-2" cols="12">
                    <div class="text-center">
                        <span class="white--text text-size text-size">follow us
                        </span>
                    </div>
                </v-col>
                <v-row class="mx-2  my-2" justify="center">
                    <v-col cols="3" md="2" sm="3" xl="2" xs="1" class="pa-0 pr-sm-1" lg="3" v-for="(item,index) in socialMedialLinks" :key="index">
                        <v-chip small style="fontSize:11px" class="ma-1" target="_blank" :href="item.link" text-color="white" :style="{backgroundColor:item.backgroundColor}">
                            <v-avatar class="ma-0  move-to-rightside" style="border:2px solid white !important">
                                <v-icon class="pa-1" color="white" style="font-size:15px;">{{ item.icon }}
                                </v-icon>
                            </v-avatar>
                            {{ item.text }}
                        </v-chip>
                    </v-col>
                </v-row>
                <v-col class="pa-0 ma-2" cols="12">
                    <v-row class="my-1" justify="center">
                        <div class="text-size footer mb-6 text-center white--text text-size">© {{ currentYear }},
                            Processdrive India Pvt. Ltd. All Rights Reserved.
                        </div>
                    </v-row>
                </v-col>
            </v-card>
        </v-row>
    </v-container>
</v-card>
    <style>
.bg-color {
    background-color: #1976D2;
    background-size: cover;
    height: 100vh;
}

.footer {
    position: fixed !important;
    left: 0;
    bottom: 0;
    width: 100%;
    color: rgb(253, 253, 253);
    text-align: center;
}

.text-size {
    font-size: 0.800rem !important;
}

.move-to-rightside {
    position: relative !important;
    right: 10px !important;
}

.container.container--app.pt-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}
</style>

Answer 1

不确定这对您是否有帮助，但我最近才为基于vuetify的应用程序编写了一个组件来处理滚动操作

<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>

用它就像

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

sub是用于非滚动内容的空间量(在此代码中默认为120 of，因为这是我的应用程序所用的)

这实际上是削减到了真正的代码的基础-它很容易添加一个“到顶部”，如FAB，只有当你滚动了一定数量，例如。