当前位置：首页 > VUE

vue怎么实现全屏滚动

2026-01-21 19:00:32VUE

Vue 实现全屏滚动的方法

使用原生 CSS 和 Vue 实现

通过 Vue 的指令或组件结合 CSS 的 scroll-snap 属性，可以实现全屏滚动效果。这种方法不需要额外依赖库，适合简单场景。

<template>
  <div class="scroll-container">
    <div class="scroll-page" v-for="(page, index) in pages" :key="index">
      {{ page.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pages: [
        { content: "Page 1" },
        { content: "Page 2" },
        { content: "Page 3" }
      ]
    };
  }
};
</script>

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

.scroll-page {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

使用第三方库 `vue-fullpage.js`

vue-fullpage.js 是一个基于 FullPage.js 的 Vue 封装库，提供丰富的全屏滚动功能，包括动画、导航和回调。

安装依赖：

npm install vue-fullpage.js

示例代码：

<template>
  <full-page :options="options" ref="fullpage">
    <div class="section">First section</div>
    <div class="section">Second section</div>
    <div class="section">Third section</div>
  </full-page>
</template>

<script>
import VueFullPage from 'vue-fullpage.js';

export default {
  components: {
    'full-page': VueFullPage
  },
  data() {
    return {
      options: {
        licenseKey: 'YOUR_KEY_HERE',
        navigation: true,
        scrollOverflow: true
      }
    };
  }
};
</script>

使用 `vue-scroll-snap`

vue-scroll-snap 是一个轻量级库，专注于实现平滑的滚动吸附效果，适合移动端和简单全屏滚动需求。

安装依赖：

npm install vue-scroll-snap

示例代码：

<template>
  <vue-scroll-snap>
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>
  </vue-scroll-snap>
</template>

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

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

<style>
.page {
  height: 100vh;
  width: 100vw;
}
</style>

自定义滚动逻辑

通过监听滚动事件和计算当前视口位置，可以手动实现全屏滚动效果。这种方法灵活性高，但需要更多代码。

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

<script>
export default {
  data() {
    return {
      pages: [
        { content: "Page 1" },
        { content: "Page 2" },
        { content: "Page 3" }
      ],
      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;
}

.page {
  height: 100vh;
  transition: transform 0.5s ease;
}
</style>