<think>我们需要实现
一个全
屏滚动效果，每次
滚动鼠标滚轮
时，页面会平滑地
滚动到下
一个全
屏区域。
我们可以使用Vue3的Composition API，结合
鼠标滚轮
事件和CSS
滚动行为来实现。
注意：这里我们使用`scroll-behavior: smooth`来实现平滑
滚动，同
时监听鼠标滚轮
事件来
触发滚动。
但是，由于
一次
滚动一个
屏幕，我们需要防止用户快速
滚动时连续
触发多次
滚动事件，因此需要加入防抖或节流，并判断
滚动方向。
另
一种更常见的做法是使用CSS的`scroll-snap-type`属性，这样可以更简单地实现每次
滚动一屏的效果，且不需要复杂的
JS控制。
这里我们采用两种方案，但更推荐使用CSS方案，因为性能更好且更符合现代标准。
方案
一（推荐）：使用CSS scroll-snap
方案二：使用
JS监听滚轮
事件，然后通过window.scrollTo进行
滚动
由于问题要求
滑动鼠标一次
滚动一个
屏幕，这里我们选择方案
一，因为它更简洁，且能直接利用浏览器的原生
滚动行为。
但是，方案
一在
鼠标滚轮
滚动时，浏览器会平滑
滚动到下
一个snap点，但并不是每次滚轮
事件都正好
滚动一屏，而是根据滚轮幅度
滚动，然后自
动吸附到最近的snap点。所以严格来说，它并不是
一次滚轮就固定
滚动一屏（如果用户
滚动的幅度小，可能不会
触发到下
一屏，而是停留在当前
屏）。因此，如果需求是必须
一次滚轮就
滚动一屏，那么我们需要使用
JS方案。
考虑到需求是“
一次
滚动一个
屏幕”，这里我们采用
JS方案，并加入节流和方向判断。
步骤：
1. 将页面分为多个全
屏部分，每个部分高度为100vh。
2.
监听鼠标滚轮
事件（注意兼容性）。
3. 当滚轮
事件触发时，判断
滚动方向，然后
滚动到上
一屏或下
一屏。
4. 使用节流函数避免多次
触发。
但是，注意：在
JS方案中，我们需要阻止默认的
滚动行为，然后自己控制
滚动，否则会出现双重
滚动。
因此，我们采用以下步骤：
使用
JS方案：
- 设置容器样式，每个子
元素高度100vh，并禁用页面默认
滚动条（html, body设置overflow:hidden）
- 在组件挂载
时添加滚轮
事件监听，在销毁
时移除
- 滚轮
事件处理函数中：
* 使用节流（例如300ms内只
触发一次）
* 判断滚轮方向（deltaY的正负）
* 根据当前
滚动位置和窗口高度，计算下
一屏的
滚动位置
* 使用window.scrollTo({ top: 目标位置, behavior: 'smooth' })进行
滚动
但是，由于我们禁用了默认
滚动，所以需要自己管理
滚动位置。
另
一种做法是不禁用默认
滚动，而是通过
事件阻止默认行为，但是这样可能会影响页面内的其他可
滚动区域。
考虑到简单性，我们这里使用全
屏容器，并禁用body
滚动。
具体实现：
模板部分：每个section为
一个全
屏，设置高度100vh
样式部分：设置body和html的overflow为hidden，并设置每个section的样式
脚本部分：
监听滚轮
事件，并
滚动到下
一个或上
一个section
注意：我们使用Vue3的Composition API。
由于滚轮
事件需要节流，我们可以使用lodash的throttle或者自己实现
一个简单的节流。
这里为了减少依赖，自己实现
一个节流函数。
代码实现如下：</think>以下是
一个在 Vue3 中实现全
屏滚动效果的完整实现，每次
鼠标滑动会
滚动一整个
屏幕高度：
```vue
<template>
<div class="scroll-container" ref="container">
<section v-for="(section, index) in sections" :key="index"
:class="{ 'active': currentIndex === index }"
:style="{ backgroundColor: section.color }">
<h1>{{ section.title }}</h1>
<p>{{ section.content }}</p>
<div class="scroll-indicator">↓ 继续
滑动 ↓</div>
</section>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
// 页面内容数据
const sections = ref([
{ title: "第
一屏", content: "这是页面第
一个全
屏区块", color: "#f0f4ff" },
{ title: "第二
屏", content: "向下
滑动进入第二个区块", color: "#e0f7fa" },
{ title: "第三
屏", content: "第三个全
屏内容区域", color: "#fff8e1" },
{ title: "最后
屏", content: "您已到达页面底部", color: "#f1f8e9" }
])
const container = ref(null)
const currentIndex = ref(0)
let isScrolling = false
// 处理
滚动事件
const handleWheel = (e) => {
if (isScrolling) return
isScrolling = true
const direction = e.deltaY > 0 ? 1 : -1
const newIndex = Math.min(Math.max(currentIndex.value + direction, 0), sections.value.length - 1)
if (newIndex !== currentIndex.value) {
currentIndex.value = newIndex
container.value.scrollTo({
top: window.innerHeight * newIndex,
behavior: 'smooth'
})
}
setTimeout(() => { isScrolling = false }, 800)
}
// 添加键盘支持
const handleKeyDown = (e) => {
if (e.key === 'ArrowDown') {
currentIndex.value = Math.min(currentIndex.value + 1, sections.value.length - 1)
} else if (e.key === 'ArrowUp') {
currentIndex.value = Math.max(currentIndex.value - 1, 0)
}
container.value.scrollTo({
top: window.innerHeight * currentIndex.value,
behavior: 'smooth'
})
}
// 添加触摸
滑动支持
let touchStartY = 0
const handleTouchStart = (e) => {
touchStartY = e.touches[0].clientY
}
const handleTouchEnd = (e) => {
const touchEndY = e.changedTouches[0].clientY
const diff = touchStartY - touchEndY
if (Math.abs(diff) > 50) {
const direction = diff > 0 ? 1 : -1
const newIndex = Math.min(Math.max(currentIndex.value + direction, 0), sections.value.length - 1)
if (newIndex !== currentIndex.value) {
currentIndex.value = newIndex
container.value.scrollTo({
top: window.innerHeight * newIndex,
behavior: 'smooth'
})
}
}
}
// 生命周期钩子
onMounted(() => {
window.addEventListener('wheel', handleWheel, { passive: false })
window.addEventListener('keydown', handleKeyDown)
container.value.addEventListener('touchstart', handleTouchStart)
container.value.addEventListener('touchend', handleTouchEnd)
})
onUnmounted(() => {
window.removeEventListener('wheel', handleWheel)
window.removeEventListener('keydown', handleKeyDown)
container.value.removeEventListener('touchstart', handleTouchStart)
container.value.removeEventListener('touchend', handleTouchEnd)
})
</script>
<style scoped>
.scroll-container {
height: 100vh;
overflow-y: hidden;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
transition: background-color 0.5s ease;
position: relative;
}
h1 {
font-size: 3rem;
margin-bottom: 1.5rem;
}
p {
font-size: 1.5rem;
max-width: 600px;
text-align: center;
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
animation: bounce 2s infinite;
opacity: 0.7;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-20px);}
60% {transform: translateY(-10px);}
}
/* 最后
一个区块不显示指示器 */
section:last-child .scroll-indicator {
display: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 { font-size: 2rem; }
p { font-size: 1.2rem; }
}
</style>
```
### 功能说明：
1. **全
屏滚动效果**：
- 每次
鼠标滑动滚动一整个
屏幕高度
- 使用 CSS `scroll-snap` 实现精准定位
- 平滑的
滚动动画效果
2. **交互支持**：
-
鼠标滚轮
滑动
- 键盘上下箭头控制
- 触摸
屏滑动支持
-
滚动节流防止过度
触发
3. **视觉
元素**：
-
滚动指示器
动画
- 当前
屏幕高亮状态
- 响应式设计适配移
动设备
- 平滑的背景色过渡效果
4. **技术实现**：
- 使用 Vue3 Composition API
- 响应式数据管理当前
屏幕索引
- 添加了生命周期钩子管理
事件监听
- 使用 CSS
动画增强用户体验
此实现完全符合"
一次
滑动滚动一屏"的需求，并提供了额外的交互方式和视觉反馈。
最低0.47元/天 解锁文章
扫一扫
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
