1. 程式人生 > >vue快取頁面返回到指定滾動位置

vue快取頁面返回到指定滾動位置

vue快取頁面返回到指定滾動位置

vue 中註冊滾動事件與dom 並無不同

以下配合keep-alive 元件使用

在 mounted 註冊滾動事件 

1

this.handleScroll 獲取scrollTop

1

2

3

mounted(){

  window.addEventListener('scroll'this.handleScroll);

}

  

1

2

3

4

handleScroll () {

  let scrollTop = document.body.scrollTop;

  this.scroll = scrollTop;

}

keep-alive 元件啟用時呼叫。該鉤子在伺服器端渲染期間不被呼叫。

1

2

3

4

5

6

7

activated() {

    if(this.scroll > 0){

       

window.scrollTo(0, this.scroll);

       this.scroll = 0;

       window.addEventListener('scroll'this.handleScroll);

    }

}

keep-alive 元件停用時呼叫。該鉤子在伺服器端渲染期間不被呼叫。

1

2

3

deactivated(){

     window.removeEventListener('scroll'this.handleScroll);

}