鍍金池/ 問答/HTML/ 在vue的mounted鉤子里面調(diào)用window對象滾動到頁面頂部的代碼未生效

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

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

window.scrollTo(0,0);

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

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

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

mounted(){
        setTimeout(()=>{
          window.scrollTo(0,0)//點擊瀏覽器后退按鈕，回到頁面后會吧滾動條滾動到20px位置
        },0)
      }

這其中的原因是什么？

回答
編輯回答
哚蕾咪

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

next(vm => {
 window.scrollTo(0,0)
});
},
這樣子試試呢
2018年4月18日 04:02
編輯回答
柒喵

vue有它自己的寫法：

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

參考1
參考2
參考3

2018年8月5日 22:36
編輯回答
薔薇花

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

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

了解到vue的nextTick是看瀏覽器的支持情況來使用promise,或者h5的MutationObserver，或者setTimeout

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

但是如果是從某個頁面點擊瀏覽器的后退按鈕回到這個頁面的話，雖然nextTick里面有打印，但是下面的window.scrollTo并沒有把滾動條回到(0,0)

 mounted(){
        console.log('home mounted')
        this.$nextTick(()=>{
          console.log('執(zhí)行nextTick')// 輸出
          window.scrollTo(0,0)// 未執(zhí)行？
        })
      },
2018年3月8日 10:20
編輯回答
莫小染

咋解決的啊 求問

2018年3月14日 11:32
編輯回答
遲月

因為在mounted生命周期，頁面剛掛載，還未完成渲染，獲取不到dom節(jié)點
可以使用this.$nextTick(function(){})在保證頁面完成渲染之后進行操作

2017年9月24日 02:31