'How to scroll a section with full height with vue3

Let's say, I have two sections namely One and Two. Both of these section has a full-screen height and full-screen width(ignore the top navbar in the video). Now, when a user scrolls my page, I don't want my sections to be half scrolled. The window will either be the first section or the second. If the user scrolls down, he will see the 2nd section, and the 2nd section will always have full-screen height. Also, if the user scrolls up, he will see the first section, and the 1st section will take up the entire height of the 1st section. Finally, users can only scroll to the 1st section or 2nd section. They cannot sit in the middle. I don't know whether I was able to describe what I wanted. But Look at the following GIF:

enter image description here

Thanks in advance.

javascripthtmlcssvue.jsscroll


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions