Tips for stopping the entire webpage from scrolling in Vuetify

Hey there, I'm facing an issue with scrolling on mobile devices and iPads. When I view my site on desktop, there is no scrolling behavior, but as soon as I switch to a mobile device or iPad, the scroll appears. This problem is specific to mobile devices and iPads. Can anyone provide assistance on how to prevent this unwanted scrolling?

<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>
                </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>
                </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>
                </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>
                        </col>
                    </row>
                </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>
                </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 }}
                        </chipt>
                    </col>
                </row>
                <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>
                    </row>
                </col>
            </card>
        </row>
    </container>
</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;
}

Answer №1

Recently, I created a custom component for my Vuetify-based app to handle scrolling. It may or may not be useful for you, but here's the basic structure:

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

To use it, simply include:

<nice-scroller sub="200px">
    .... insert content here
</nice-scroller>

The sub attribute controls the amount of space reserved for non-scrolling content (default is 120px in this example).

This code snippet is a simplified version - you can easily extend it with additional features such as a "to top" button that appears after scrolling a certain distance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to turn off _moz_resizing on my browser?

I am currently using the nicEdit editor and have successfully integrated my own custom image resizing script. However, I am facing an issue where the default _moz_resizing feature in Firefox is interfering with my custom script. My goal is to have specifi ...

Prevent unnecessary re-renders of components by optimizing state changes with hooks

In my Layout component, there is a Table component with an Entry component for each row. Each row can be selected, and when a row is selected, it is added to the state so that all selected entries can be sent to a REST service later using a button. The i ...

Adjusting the value of a user form with multidata in PHP and Javascript

I am looking for guidance on how to modify the value of an input in a form that contains multiple data entries. Here is my form: <form method="post" action="pax-flight.php#pax-flight" class="paxform"> <input type="hidden" value="{"data":{"us ...

What is the best way to change a canvas into an image while preserving transparency?

Currently, I am attempting to modify a weather radar image with a black background by making the background transparent using canvas. However, when I view the modified image, instead of transparency, the background now appears as a red and black checkerboa ...

Three.js - Model is unable to cast shadows

Greetings! I am currently diving into the world of three.js and utilizing react-three-fiber to integrate it with React. However, I've encountered a challenge regarding shadow casting between models. Despite setting obj.castShadow = true and obj.receiv ...

How can I collapse the dropdown menu in typeahead.js?

I am currently utilizing typeahead.js for a typeahead functionality. My goal is to achieve the opposite of what was discussed in this thread: Programmatically triggering typeahead.js result display Despite attempting to trigger a blur event on the typeah ...

Exploring Angular.JS: How to Access Sub-Arrays and Parse Keys

Trying my hand at building something with Angular for the first time, I'm facing an issue with retrieving JSON data. The data is fetched from a SQL database in JSON format and passed to a template using Angular route: .when('/tasks/:TaskID&apos ...

Stop the execution of client-side code in a Nuxt SSR web application

After setting up a SSR/progressive nuxt project using create-nuxt-app, I encountered an issue with HTTP requests being made from my two pages to a backend API. These requests are initiated from the async asyncData(ctx) method in my nuxt page. Strangely, w ...

Revise the calculation output when a specific input is missing

As I work on creating a basic web page for computing values based on selected options, I've encountered an issue with the calculation process. The result does not immediately appear; instead, I have to input a value like 0 and then delete it in order ...

How can I adjust the position of a target point in the chase camera using THREE.js?

Recently, I've delved into the world of THREE.js and decided to create a game featuring a spaceship as the main element. Utilizing a chase camera for my model, I encountered a challenge where I needed to adjust the camera's position in relation t ...

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

I am currently utilizing the DataTable plugin to display rows in a table. I would like to highlight duplicate rows in the same color scheme. Can someone please assist me with this issue? In the example below, the entry for Black Winters is duplicated. I ai ...

Can one conceal the JavaScript code that has been written?

Can JavaScript (jQuery) codes be hidden from view? I have a program with several load() functions and I'm worried that everyone can see the page addresses. Is this a risk? Example code snippet: load('account/module/message/index.php'); ...

Showing the total quantity of products, reminiscent of a virtual shopping basket

I am trying to show a number similar to how a shopping cart displays items. The php code I was given currently shows a cookie value, which is mostly functional. However, if you encounter errors while adding items to the cart, it increases the cookie count ...

How to Retrieve Correct JSON Data from Mongoose Query in Node.js

I am currently working on an express application that utilizes mongoDB as the database and handlebars as my server-side templating engine. Unlike many applications, I have chosen not to incorporate AngularJS or Ajax into my project. One of the challenges ...

What issues can be found in this code snippet for AngularJS in the browser code editor that is interacting with Node.js

Greetings, I am currently working on developing a free in-browser code editor for high school students at the basic level to share knowledge. After extensive research, I came across this link. Following the instructions provided, I made some setups and mod ...

Monitoring the actions that occur when my button is clicked using Firefox and Javascript

Whenever I click on a few new buttons that I've recently added, something weird is happening. The buttons are functioning correctly, but they keep scrolling the page back to the top. I suspect that there might be some interference from another part of ...

Stop users from saving the page in Next.js

I'm currently working on a NextJs project that involves building an editor application. I want to ensure that the editor functionality does not work when users attempt to save the page in a different format, similar to how applications like Youtube an ...

Setting minimum and maximum limits for a JavaScript variable: tips and tricks

Currently, I am implementing a pagination feature using vuejs to display my algolia data. I am determining whether the user has clicked on either the previous button, next button, or directly inputted a page number (1, 2, 3, etc.) setPage: function(p ...

Trouble with Rails partial refresh using Ajax feature

On the homepage, I would like to display article information to the user. When the user clicks on the My Articles link, the relevant information should be shown without refreshing the entire page: Here is the code for the ArticlesController: def index ...

Angular allows you to retrieve values from localStorage

I have been trying to solve this issue by looking at various examples, but haven't been able to figure it out. In my Ionic app, I have a contact form that allows users to contact a listing owner. After the form submission, I want to store the ad id i ...