Scroll snapping too fast

Question

Yo guys , i have added scroll snapping in my veutify project by use normal CSS , scroll-snap-type & scroll-snap-align. But there is too fast to scroll to another page , it almost is jumped to another page.

i have saw that some ppl used js to make it slower , but idk why it cant work in my vuetify project. May i know is it possible if i adjust the scroll snapping to slower , even i use js or plugin?

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>

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 part):

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

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

.v-icon__component {
  width: inherit;
  height: inherit;
}