How to scroll a section with full height with vue3-CodePudding

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:

Thanks in advance.

CodePudding user response：

You can do this in CSS with Scroll Snap:

Apply scroll-snap-type: y mandatory; to the <html> and <body> elements to enable vertical snapping.
Apply scroll-snap-align: start; to the page element to snap to the start of the page element.

html, body {
  scroll-snap-type: y mandatory; 1️⃣
}

.page {
  height: 100vh;
  width: 100vw;
  scroll-snap-align: start; 2️⃣
}

demo