vue中使用scrollTo無效的解決方法
更新時間：2023年08月21日 09:26:58 作者：Smile_zxx
本文主要介紹了vue中使用scrollTo無效的解決方法，想要使用scrollTo使當(dāng)前網(wǎng)頁滾動到指定位置，本文就來解決一下，具有一定的 參考價值，感興趣的可以了解一下
首先需求： 在播放列表中，章節(jié)目錄列表自動定位到該小節(jié)，每次頁面點擊后重新進去要把當(dāng)前的播放記錄定位到當(dāng)前位置中
方法：使用scrollTo：當(dāng)前網(wǎng)頁滾動到指定位置
具體的操作步驟
頁面css的結(jié)構(gòu)如下
course-list 為可滾動的元素，滾動的位置為當(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要作用在可滾動的元素上，不然不生效，scrollTop就會一直為0
到此這篇關(guān)于vue中使用scrollTo無效的解決方法的文章就介紹到這了,更多相關(guān)vue scrollTo無效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Axios提供了簡單而強大的API來處理HTTP請求,而FormData提供了用于構(gòu)建表單數(shù)據(jù)的API,這篇文章主要介紹了Vue中如何使用Axios發(fā)送FormData請求,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了封裝一個更易用的Dialog組件過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
vue element實現(xiàn)將表格單行數(shù)據(jù)導(dǎo)出為excel格式流程詳解
這篇文章主要介紹了vue element實現(xiàn)將表格單行數(shù)據(jù)導(dǎo)出為excel格式流程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
vue項目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決
這篇文章主要介紹了vue項目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
VS?Code打開vue文件出現(xiàn)很多黃色波浪線的完美解決辦法
作為一名經(jīng)驗豐富的開發(fā)者,下面這篇文章主要給大家介紹了關(guān)于VS?Code打開vue文件出現(xiàn)很多黃色波浪線的完美解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-04-04
關(guān)于element同時使用Drawer和Dialog出現(xiàn)多個遮罩問題
這篇文章主要介紹了關(guān)于element同時使用Drawer和Dialog出現(xiàn)多個遮罩問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細介紹了VUE項目中封裝Echart折線圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue前端如何向后端傳遞參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了vue的axios和mock.js，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue中避免濫用this去讀取data中數(shù)據(jù)
這篇文章主要介紹了Vue中避免濫用this去讀取data中數(shù)據(jù)的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03