当前位置：首页 > VUE

vue实现全屏滚动

2026-01-14 07:05:29VUE

Vue 实现全屏滚动的方法

全屏滚动效果可以通过多种方式实现，以下是几种常见的方法：

使用 vue-fullpage.js

vue-fullpage.js 是一个基于 fullPage.js 的 Vue 组件，可以轻松实现全屏滚动效果。

安装依赖：

npm install vue-fullpage.js

在 Vue 项目中引入并使用：

import Vue from 'vue'
import VueFullPage from 'vue-fullpage.js'

Vue.use(VueFullPage)

模板中使用：

<template>
  <full-page :options="options">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
  </full-page>
</template>

<script>
export default {
  data() {
    return {
      options: {
        licenseKey: 'YOUR_KEY',
        navigation: true,
        anchors: ['page1', 'page2', 'page3']
      }
    }
  }
}
</script>

<style>
.section {
  text-align: center;
  font-size: 3em;
  color: white;
}
</style>

使用原生 CSS 和 Vue 实现

可以通过 CSS 的 overflow: hidden 和 height: 100vh 属性结合 Vue 的滚动事件监听实现基本全屏滚动效果。

<template>
  <div class="container" @wheel="handleWheel">
    <div 
      class="page" 
      v-for="(page, index) in pages" 
      :key="index"
      :style="{ transform: `translateY(${-currentIndex * 100}vh)` }"
    >
      {{ page }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pages: ['第一屏', '第二屏', '第三屏'],
      currentIndex: 0,
      isScrolling: false
    }
  },
  methods: {
    handleWheel(e) {
      if (this.isScrolling) return

      this.isScrolling = true

      if (e.deltaY > 0 && this.currentIndex < this.pages.length - 1) {
        this.currentIndex++
      } else if (e.deltaY < 0 && this.currentIndex > 0) {
        this.currentIndex--
      }

      setTimeout(() => {
        this.isScrolling = false
      }, 1000)
    }
  }
}
</script>

<style>
.container {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.page {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  transition: transform 0.5s ease;
}
</style>

使用 vue-scroll-snap 插件

vue-scroll-snap 是一个轻量级的 Vue 插件，可以实现类似 iOS 的滚动吸附效果。

安装：

npm install vue-scroll-snap

使用示例：

<template>
  <vue-scroll-snap :fullscreen="true">
    <div class="item">第一屏</div>
    <div class="item">第二屏</div>
    <div class="item">第三屏</div>
  </vue-scroll-snap>
</template>

<script>
import VueScrollSnap from 'vue-scroll-snap'

export default {
  components: {
    VueScrollSnap
  }
}
</script>

<style>
.item {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}
</style>