当前位置：首页 > VUE

vue实现全屏滚动

2026-03-28 09:55:27VUE

实现全屏滚动的基本思路

在Vue中实现全屏滚动效果，可以通过监听鼠标滚轮事件或触摸事件，结合CSS的transform属性或JavaScript的scrollTo方法来实现页面平滑滚动。以下是几种常见的实现方式：

使用CSS和Vue指令

通过Vue自定义指令监听滚动事件，结合CSS的overflow: hidden和height: 100vh实现全屏滚动效果。

<template>
  <div class="fullpage-container" v-fullpage>
    <div class="section" v-for="(section, index) in sections" :key="index">
      {{ section.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sections: [
        { content: 'Section 1' },
        { content: 'Section 2' },
        { content: 'Section 3' }
      ]
    }
  },
  directives: {
    fullpage: {
      inserted(el) {
        let currentSection = 0
        const sections = el.querySelectorAll('.section')
        const totalSections = sections.length

        window.addEventListener('wheel', (e) => {
          if (e.deltaY > 0 && currentSection < totalSections - 1) {
            currentSection++
          } else if (e.deltaY < 0 && currentSection > 0) {
            currentSection--
          }
          sections[currentSection].scrollIntoView({ behavior: 'smooth' })
        })
      }
    }
  }
}
</script>

<style>
.fullpage-container {
  overflow: hidden;
  height: 100vh;
}
.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
</style>

使用第三方库

Vue中有专门的全屏滚动库，如vue-fullpage.js或vue-scroll-snap，可以快速实现全屏滚动效果。

安装vue-fullpage.js：

npm install vue-fullpage.js

使用示例：

<template>
  <full-page ref="fullpage" :options="options">
    <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: {
        navigation: true,
        scrollBar: true
      }
    }
  }
}
</script>

<style>
.section {
  text-align: center;
  font-size: 3em;
  color: white;
}
.section:nth-child(1) {
  background: #3498db;
}
.section:nth-child(2) {
  background: #2ecc71;
}
.section:nth-child(3) {
  background: #e74c3c;
}
</style>

使用CSS Scroll Snap

现代浏览器支持CSS Scroll Snap，可以实现类似全屏滚动的效果，无需JavaScript。

vue实现全屏滚动

<template>
  <div class="scroll-container">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
  </div>
</template>

<style>
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.section {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
</style>