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

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

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

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

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

具體的操作步驟

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

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

遇到的坑：

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

補(bǔ)充：

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

1、場(chǎng)景恢復(fù)

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

控制臺(tái)顯示

0

2、解決辦法

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

控制臺(tái)顯示

100

3、原因

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

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

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

再說(shuō)一下

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

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

您可能感興趣的文章: