vue中使用scrollTo沒有效果的完美解決方法

更新時間：2023年10月09日 15:02:24 作者：Smile_zxx

這篇文章主要介紹了在vue中使用scrollTo沒有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動的元素上,不然不生效,scrollTop就會一直為0,需要的朋友可以參考下

在vue中使用scrollTo沒有效果的解決方法

首先需求：在播放列表中，章節(jié)目錄列表自動定位到該小節(jié)，每次頁面點擊后重新進去要把當前的播放記錄定位到當前位置中
方法：使用scrollTo：當前網(wǎng)頁滾動到指定位置

具體的操作步驟

頁面css的結(jié)構(gòu)如下course-list 為可滾動的元素，滾動的位置為當前選中元素的offsetTop

this.$nextTick(() => {
	let activeCard = document.querySelector(".liveChapter-card-small.active")
	let scrollY = activeCard.offsetTop
	activeCard.parentElement.scrollTo(0, scrollY)
})

遇到的坑：

要使用this.$nextTick才能生效
scrollTo要作用在可滾動的元素上，不然不生效，scrollTop就會一直為0

補充：

vue項目設(shè)置scrollTop不起作用（解決方法及原因）

1、場景恢復(fù)

activated() {
this.$refs.viewBox.scrollTop = 100
console.log(this.$refs.viewBox.scrollTop)
}

控制臺顯示

0

2、解決辦法

activated() {
this.$nextTick(() => {
this.$refs.viewBox.scrollTop = 100
})
console.log(this.$refs.viewBox.scrollTop)
}

控制臺顯示

100

3、原因

先考慮一個核心問題，activated究竟是在vue生命周期的哪個節(jié)點執(zhí)行呢？

我們知道，要想使用activated，必須設(shè)置keep-alive（緩存組件，自身不會渲染dom元素）。當 keepAlive為 true時，keep-alive包裹的動態(tài)組件會被緩存。

當你的組件在 keep-alive內(nèi)被切換，組件里的 activated 函數(shù)就會執(zhí)行。也就是說，activated 方法執(zhí)行的時候，并不會考慮你組件里的dom是否已渲染（大概率是沒有渲染，畢竟組件一切換activated 就開始執(zhí)行，頁面的dom渲染根本來不及），dom都還沒渲染，this.$refs.viewBox.scrollTop這種給dom賦值的代碼肯定是賦值不上的。

再說一下

this.$nextTick() 方法，$nextTick 是在下次 DOM 更新結(jié)束之后執(zhí)行延遲回調(diào)，意思很簡單，就是等待dom刷新出來之后再執(zhí)行的函數(shù)。簡直就是activated里給dom賦值時的御用函數(shù)有沒有。

到此這篇關(guān)于在vue中使用scrollTo沒有效果的解決方法的文章就介紹到這了,更多相關(guān)vue使用scrollTo沒有效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: