在vue的mounted鉤子里面調(diào)用window對(duì)象滾動(dòng)到頁(yè)面頂部的代碼未生效

1.我想在頁(yè)面mounted時(shí)調(diào)用

window.scrollTo(0,0);

讓滾動(dòng)條回到頂部，但是并沒(méi)有生效
那我懷疑是文檔沒(méi)有全部渲染完整，我用到了$nextTick，為了觀察我讓滾動(dòng)條滾動(dòng)20px,

 this.$nextTick(()=>{
          console.log('執(zhí)行nextTick')
          window.scrollTo(0,20)// 未生效，點(diǎn)擊瀏覽器后退按鈕回到這個(gè)頁(yè)面滾動(dòng)條依舊在上個(gè)頁(yè)面所在的位置
        })

上面的代碼中頁(yè)面刷新后打印輸入并且滾動(dòng)條向下20px，但是如果是從某個(gè)頁(yè)面點(diǎn)擊瀏覽器后退按鈕回到這個(gè)頁(yè)面的話，雖然有打印輸出，但是window.scrollTo(0,20)應(yīng)該是執(zhí)行了，但是并沒(méi)有把滾動(dòng)條回到20px的位置。
但是如果用setTimeout就可以

mounted(){
        setTimeout(()=>{
          window.scrollTo(0,0)//點(diǎn)擊瀏覽器后退按鈕，回到頁(yè)面后會(huì)吧滾動(dòng)條滾動(dòng)到20px位置
        },0)
      }

這其中的原因是什么？

回答

編輯回答

哚蕾咪

beforeRouteEnter: (to, from, next) => {

next(vm => {
 window.scrollTo(0,0)
});
},
這樣子試試呢

2018年4月18日 04:02

編輯回答

柒喵

vue有它自己的寫(xiě)法：

mounted: function () {
  this.$nextTick(function () {
    // 代碼保證 this.$el 在 document 中
  })
}

參考1
參考2
參考3

2018年8月5日 22:36

編輯回答

薔薇花

你好，我之前也是懷疑這個(gè)，但是我用$nextTick發(fā)現(xiàn)也沒(méi)用的，`

    setTimeout(()=>{
    console.log('執(zhí)行setTimeout')
      window.scrollTo(0,0)// 生效
    },0)// 生效
    this.$nextTick(()=>{
    console.log('執(zhí)行了')
      window.scrollTo(0,0)// 未生效`
    })

了解到vue的nextTick是看瀏覽器的支持情況來(lái)使用promise,或者h(yuǎn)5的MutationObserver，或者setTimeout

如果是刷新頁(yè)面重新加載的話$nextTick里面的window.scrollTo(0,0)是執(zhí)行了并且如果寫(xiě)成window.scrollTo(0,10)會(huì)發(fā)現(xiàn)滾動(dòng)條向下滾動(dòng)了10px。

但是如果是從某個(gè)頁(yè)面點(diǎn)擊瀏覽器的后退按鈕回到這個(gè)頁(yè)面的話，雖然nextTick里面有打印，但是下面的window.scrollTo并沒(méi)有把滾動(dòng)條回到(0,0)

 mounted(){
        console.log('home mounted')
        this.$nextTick(()=>{
          console.log('執(zhí)行nextTick')// 輸出
          window.scrollTo(0,0)// 未執(zhí)行？
        })
      },

2018年3月8日 10:20

編輯回答