scroll-snap not working in vuetify project?

Question

Yo guys , i have a task this that i need to add scroll snapping in my all page. I planned to use normal CSS , scroll-snap-type & scroll-snap-align to try done this task.

I created a set of code in index.html but it wont work. i have checked that if i remove this code then it can work ady:

<script type="module" src="/src/main.js"></script>

Then i checked which line may effect to make the scroll-snap not working in index.html , then i find this line:

import App from './App.vue'

Then after i go checked the App.vue but i really dont know where are the bug (damn).

They have some additional information of my project:

1. It is a VUETIFY project in vue 3
2. refer:https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
3. i add the scroll-snap-type in html class and the srollbar (overflow-y) also be displayed by html.
4. i have created a new sample veutify project for testing it and it is work.

May I know where the main reason is that i cant run scroll-snap in my veutify project?

Full Code:

text.vue:

    <template>
      <div class="page v1">1</div>
      <div class="page v2">2</div>
      <div class="page v1">3</div>
      <div class="page v2">4</div>
      <div class="page v1">5</div>
      <div class="page v2">6</div>
    </template>
    
    <script setup></script>
    
    <style>
    .page {
  font-size: 100px;
  text-align: center;
  height: 2000px;
  scroll-snap-align: start;
}

.v1 {
  background-color: blanchedalmond;
}

.v2 {
  background-color: gray;
}
    </style>

App.vue:

<template>
  <v-app>
    <div :style="{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 0 }">
      <AppBackground />
    </div>
    <div :style="{ overflow: 'hidden', position: 'relative', zIndex: 1 }">
      <AppHeader />
      <router-view />
      <AppFooter />
    </div>
    <AppCookies />
  </v-app>
</template>
<script>
import AppBackground from '@/components/Background'
import AppCookies from '@/components/Cookies.vue'
import AppHeader from '@/components/Header'
import AppFooter from '@/components/Footer'

export default {
  name: 'App',
  components: {
    AppBackground,
    AppCookies,
    AppHeader,
    AppFooter
  }
}
</script>
<style lang="scss">
@font-face {
  font-family: 'Poppins';
  font-weight: thin;
  font-style: normal;
  src:
    local('Poppins'),
    url(./fonts/Poppins/Poppins-Thin.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: light;
  font-style: normal;
  src:
    local('Poppins'),
    url(./fonts/Poppins/Poppins-Light.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: normal;
  font-style: normal;
  src:
    local('Poppins'),
    url(./fonts/Poppins/Poppins-Regular.ttf) format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'Poppins';
  font-weight: bold;
  font-style: normal;
  src:
    local('Poppins'),
    url(./fonts/Poppins/Poppins-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: black;
  font-style: normal;
  src:
    local('Poppins'),
    url(./fonts/Poppins/Poppins-Black.ttf) format('truetype');
}

#app {
  font-family: 'Poppins', Avenir, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow: hidden;
}
</style>

main.js

import { registerPlugins } from '@/plugins'

// Components
import App from './App.vue'

// Composables
import { createApp } from 'vue'

const app = createApp(App)

registerPlugins(app)

app.mount('#app')

index.html (style parts):

<style>
    html {
      scroll-snap-type: y mandatory;
      margin: 0;
      overflow-y: scroll;
    }

    body {
      margin: 0;
      height: 100%;
    }

    .v-icon__component {
      width: inherit;
      height: inherit;
    }
  </style>