Vue實現返回記住滾動位置

一、為什麼需要返回記住滾動位置

在進行網頁滾動的時候，如果用戶返回上一頁，會發現頁面又回到了最上面，需要重新滾動到之前的位置，體驗非常不好。因此，我們就需要返回上一頁時，能夠記住之前的滾動位置。

二、如何實現返回記住滾動位置

Vue提供了一個非常好用的指令v-scroll，可以監控元素的滾動事件。我們只需要在返回上一頁的時候，將之前的滾動位置傳給下一頁，再利用v-scroll指令來進行滾動，就能夠實現返回記住滾動位置的功能。

// 上一頁
<a :href="previousUrl" target="_self" @click="storeScrollPosition">返回上一頁</a>

// 下一頁
<div v-scroll="scrollPosition">...</div>

export default {
  data() {
    return {
      scrollPosition: 0
    };
  },
  methods: {
    storeScrollPosition() {
      this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    }
  }
}

三、解析實現代碼

我們使用了v-scroll指令來監控元素的滾動事件。具體來說，我們將滾動位置存儲在scrollPosition變數中，然後在下一頁中，使用v-scroll指令來進行滾動。

<div v-scroll="scrollPosition">...</div>

export default {
  data() {
    return {
      scrollPosition: 0
    };
  }
}

我們在下一頁的div中綁定了v-scroll指令，將之前的滾動位置傳遞給scrollPosition變數。這樣，當用戶返回之前的頁面時，scrollPosition的值就被保留下來。

在上一頁中，我們將scrollPosition的值傳遞給下一頁。

<a :href="previousUrl" target="_self" @click="storeScrollPosition">返回上一頁</a>

export default {
  methods: {
    storeScrollPosition() {
      this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    }
  }
}

我們在上一頁的a標籤中，綁定了storeScrollPosition方法，將當前滾動位置存儲在scrollPosition變數中。然後，我們在query或params中將這個變數傳遞給下一頁，這樣下一頁就能夠使用它。

四、實現效果演示

我們可以使用如下代碼來展示實現效果：

// 上一頁
<a :href="previousUrl" target="_self" @click="storeScrollPosition">返回上一頁</a>

// 下一頁
<div v-scroll="scrollPosition">...</div>

export default {
  data() {
    return {
      scrollPosition: 0
    };
  },
  methods: {
    storeScrollPosition() {
      this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    }
  }
}

執行上面的代碼，然後在上一頁中滾動一段距離並返回下一頁，就會看到滾動位置被記住了。

五、總結

Vue提供了非常好用的v-scroll指令，可以實現返回記住滾動位置的功能。我們只需要將滾動位置存儲在一個變數中，在下一頁中再使用v-scroll指令進行滾動即可。