当前位置：首页 > VUE

vue怎么实现全屏滚动

2026-02-22 10:14:16VUE

实现全屏滚动的Vue方案

使用vue-fullpage.js库

安装vue-fullpage.js库可以快速实现全屏滚动效果：

npm install vue-fullpage.js

在Vue组件中引入并使用：

import 'fullpage.js/vendors/scrolloverflow' // 可选，支持内容溢出滚动
import VueFullPage from 'vue-fullpage.js'

Vue.use(VueFullPage)

export default {
  template: `
    <full-page :options="options">
      <div class="section">第一屏内容</div>
      <div class="section">第二屏内容</div>
      <div class="section">第三屏内容</div>
    </full-page>
  `,
  data() {
    return {
      options: {
        licenseKey: 'YOUR_KEY',
        scrollOverflow: true,
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec']
      }
    }
  }
}

自定义实现方案

通过监听wheel/touch事件和CSS transform实现基础全屏滚动：

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

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      pages: [
        { content: '第一屏' },
        { content: '第二屏' },
        { content: '第三屏' }
      ],
      isScrolling: false
    }
  },
  mounted() {
    window.addEventListener('wheel', this.handleScroll)
    window.addEventListener('touchmove', this.handleTouch, { passive: false })
  },
  methods: {
    handleScroll(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
      }, 800)
    },
    handleTouch(e) {
      // 实现触摸滑动逻辑
    }
  }
}
</script>

<style>
.fullpage-container {
  height: 100vh;
  overflow: hidden;
}
.page {
  height: 100vh;
  transition: transform 0.8s ease;
}
</style>

使用CSS scroll-snap

现代CSS方案，无需JavaScript即可实现基础效果：

<template>
  <div class="scroll-container">
    <section class="page">第一屏</section>
    <section class="page">第二屏</section>
    <section class="page">第三屏</section>
  </div>
</template>

<style>
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.page {
  height: 100vh;
  scroll-snap-align: start;
}
</style>