How to set timeout to handle scroll in VueJS?

Question

Vue.js

Hello, I have a problem, I have a page of 5 sections that are stretched to the full width of the screen, they are displayed through v-if. I want to make sure that when scrolling (on a computer and mobile), the pages change, but the problem is that I can’t put any delay on the scroll, that is, when the mouse wheel is rotated, the method works many times and I find myself in the last section.

I think I need something like this:
https://your-startup.space/portfolio/burger/

Here is an example html:

<section class="page page1" v-if="page == 0"></section>
<section class="page page2" v-else-if="page == 1"></section>
<section class="page page3" v-else-if="page == 2"></section>
<section class="page page4" v-else-if="page == 3"> </section>
<section class="page page5" v-else></section>

I think there is no point in inserting the script, it doesn’t really work out there.
Thanks in advance!

Answer 1

Debouncing and Throttling in JavaScript