本文例項為大家分享了vue實現全屏滾動效果（的具體程式碼，供大家參考，具體內容如下

是什麼

網頁的一個頁面佔據一屏的寬高，多個頁面上下或者左右拼接在一起。當滑動滑鼠滾輪，或點選導航按鈕時，可以平滑到對應的頁面。

此次只實現滑鼠滾動

實現原理

使用mousewheel,DOMMouseScroll(火狐用)監聽滑鼠滾動事件，當滑鼠上下的滾動的時候，當前的頁面transformY(屏高)或者transformX(屏寬)

程式碼實現

HTML

<template>
 <div class="fullPage" ref="fullPage">
  <div
   class="fullPageContainer"
   ref="fullPageContainer"
   @mousewheel="mouseWheelHandle" //監聽滑鼠事件
   @DOMMouseScroll="mouseWheelHandle" // 監聽滑鼠事件
  >
   <div class="section section1">1</div>
   <div class="section section2">2</div>
   <div class="section section3">3</div>
   <div class="section section4">4</div>
  </div>
 </div>
</template>

JS

<script>
export default {
 name: "Home",data() {
  return {
   fullpage: {
    current: 1,// 當前的頁面編號
    isScrolling: false,// 是否在滾動,是為了防止滾動多頁，需要通過一個變數來控制是否滾動
    deltaY: 0 // 返回滑鼠滾輪的垂直滾動量，儲存的滑鼠滾動事件的deleteY,用來判斷是往下還是往上滾
   }
  };
 },methods: {
  next() { // 往下切換
   let len = 4; // 頁面的個數
   if (this.fullpage.current + 1 <= len) { // 如果當前頁面編號+1 小於總個數，則可以執行向下滑動
    this.fullpage.current += 1; // 頁面+1
    this.move(this.fullpage.current); // 執行切換
   }
  },pre() {// 往上切換
   if (this.fullpage.current - 1 > 0) { // 如果當前頁面編號-1 大於0，則可以執行向下滑動
    this.fullpage.current -= 1;// 頁面+1
    this.move(this.fullpage.current);// 執行切換
   }
  },move(index) {
   this.fullpage.isScrolling = true; // 為了防止滾動多頁，需要通過一個變數來控制是否滾動
   this.directToMove(index); //執行滾動
   setTimeout(() => {    //這裡的動畫是1s執行完，使用setTimeout延遲1s後解鎖
    this.fullpage.isScrolling = false;
   },1010);
  },directToMove(index) {
   let height = this.$refs["fullPage"].clientHeight; //獲取螢幕的寬度
   let scrollPage = this.$refs["fullPageContainer"];  // 獲取執行tarnsform的元素
   let scrollHeight; // 計算滾動的告訴，是往上滾還往下滾
   scrollHeight= -(index - 1) * height + "px";
   scrollPage.style.transform = `translateY(${scrollHeight})`;
   this.fullpage.current = index;
  },mouseWheelHandle(event) { // 監聽滑鼠監聽
   // 新增冒泡阻止
   let evt = event || window.event;
   if (evt.stopPropagation) {
    evt.stopPropagation();
   } else {
    evt.returnValue = false;
   }
   if (this.fullpage.isScrolling) { // 判斷是否可以滾動
    return false;
   }
   let e = event.originalEvent || event;
   this.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
   if (this.fullpage.deltaY > 0) {
    this.next();
   } else if (this.fullpage.deltaY < 0) {
    this.pre();
   }
  }
 }
};
</script>

CSS

<style scoped>
.fullPage{
 height: 100%;//一定要設定，保證佔滿
 overflow: hidden;//一定要設定，多餘的先隱藏
 background-color: rgb(189,211,186);
}
.fullPageContainer{
 width: 100%;
 height: 100%;
 transition: all linear 0.5s;
}
.section {
 width: 100%;
 height: 100%;
 background-position: center center;
 background-repeat: no-repeat;
}
.section1 {
 background-color: rgb(189,186);
 background: url("./assets/intro-bg.jpg");
}
.section1 .secction1-content {
 color: #fff;
 text-align: center;
 position: absolute;
 top: 40%;
 right: 0;
 left: 0;
}
.secction1-content h1 {
 font-size: 40px;
 padding-bottom: 30px;
}
.secction1-content p {
 font-size: 20px;
}
.section2 {
 background-color: rgb(44,48,43);
}
.section3 {
 background-color: rgb(116,104,109);
}
.section4 {
 background-color: rgb(201,202,157);
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。