如何使用 vue3 滚动全高的部分

Question

比方说，我有两个部分，即第一部分和第二部分。这两个部分都有全屏高度和全屏宽度（忽略视频中顶部的导航栏）。现在，当用户滚动我的页面时，我不希望我的部分滚动一半。 window 将是第一部分或第二部分。如果用户向下滚动，他将看到第二部分，第二部分将始终具有全屏高度。此外，如果用户向上滚动，他将看到第一部分，并且第一部分将占据第一部分的整个高度。最后，用户只能滚动到第一部分或第二部分。他们不能坐在中间。我不知道我是否能够描述我想要的东西。但是请看下面的 GIF：

提前致谢。

Answer 1

您可以在 CSS 中使用 Scroll Snap 执行此操作：

将 scroll-snap-type: y mandatory; 应用于 <html> 和 <body> 元素以启用垂直对齐。
将 scroll-snap-align: start; 应用于页面元素以捕捉到页面元素的开头。

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

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

demo

如何使用 vue3 滚动全高的部分

How to scroll a section with full height with vue3

html

javascript

css

scroll

vue.js