当前位置：首页 > VUE

vue实现pc全屏滚动

2026-01-22 19:56:10VUE

实现PC全屏滚动的Vue方案

全屏滚动效果通常指页面按整屏高度分块，滚动时自动吸附到最近的区块。以下是基于Vue的实现方法：

使用vue-fullpage.js库

安装vue-fullpage.js：

npm install vue-fullpage.js --save

基础配置示例：

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

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

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

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

原生实现方案

通过监听滚动事件实现：

<template>
  <div class="container" ref="container">
    <div 
      v-for="(item, index) in sections" 
      :key="index"
      class="section"
      :style="{ height: `${screenHeight}px` }"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenHeight: 0,
      sections: [
        { content: '第一屏' },
        { content: '第二屏' },
        { content: '第三屏' }
      ],
      currentIndex: 0,
      isScrolling: false
    }
  },
  mounted() {
    this.screenHeight = window.innerHeight
    window.addEventListener('resize', this.handleResize)
    window.addEventListener('wheel', this.handleWheel, { passive: false })
  },
  methods: {
    handleResize() {
      this.screenHeight = window.innerHeight
    },
    handleWheel(e) {
      if (this.isScrolling) return
      e.preventDefault()

      this.isScrolling = true
      const direction = e.deltaY > 0 ? 1 : -1
      this.currentIndex = Math.max(0, 
        Math.min(this.sections.length - 1, this.currentIndex + direction))

      window.scrollTo({
        top: this.currentIndex * this.screenHeight,
        behavior: 'smooth'
      })

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

注意事项

移动端需要额外处理触摸事件
考虑浏览器兼容性问题，特别是scroll-behavior属性
性能优化：防抖处理滚动事件
路由切换时需重置滚动位置

进阶功能实现

添加导航点交互：

<template>
  <div class="dots">
    <div 
      v-for="(item, index) in sections"
      :key="index"
      :class="{ active: currentIndex === index }"
      @click="scrollTo(index)"
    />
  </div>
</template>

<script>
methods: {
  scrollTo(index) {
    this.currentIndex = index
    window.scrollTo({
      top: index * this.screenHeight,
      behavior: 'smooth'
    })
  }
}
</script>

<style>
.dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.dots div {
  width: 10px;
  height: 10px;
  margin: 10px 0;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
.dots div.active {
  background: #333;
}
</style>

以上方案可根据实际需求选择使用库或原生实现，前者开发效率高但灵活性较低，后者可控性强但需处理更多细节。

vue实现pc全屏滚动