欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中使用scrollTo無(wú)效的解決方法

 更新時(shí)間：2023年08月21日 09:26:58   作者：Smile_zxx  
本文主要介紹了vue中使用scrollTo無(wú)效的解決方法，想要使用scrollTo使當(dāng)前網(wǎng)頁(yè)滾動(dòng)到指定位置，本文就來(lái)解決一下，具有一定的 參考價(jià)值，感興趣的可以了解一下

首先需求： 在播放列表中，章節(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

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

相關(guān)文章

  • vue實(shí)現(xiàn)搜索并高亮文字的兩種方式總結(jié)

    vue實(shí)現(xiàn)搜索并高亮文字的兩種方式總結(jié)

    在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,常見(jiàn)的實(shí)現(xiàn)方式有插入標(biāo)簽和貼標(biāo)簽兩種,這兩種方式適用于不同的場(chǎng)景,各有優(yōu)劣,下面我們就來(lái)看看他們的具體實(shí)現(xiàn)吧
    2023-11-11
  • ArcGis?API?for?js在vue.js中的使用示例詳解

    ArcGis?API?for?js在vue.js中的使用示例詳解

    這篇文章主要為大家介紹了ArcGis?API?for?js在vue.js中的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • vue引入組件的幾種方法匯總

    vue引入組件的幾種方法匯總

    這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個(gè)頁(yè)面需要就在那個(gè)頁(yè)面引入、注冊(cè)、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2023-10-10
  • 關(guān)于Vue-cli3煩人的eslint問(wèn)題

    關(guān)于Vue-cli3煩人的eslint問(wèn)題

    這篇文章主要介紹了關(guān)于Vue-cli3煩人的eslint問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • Vue3時(shí)間軸組件問(wèn)題記錄(時(shí)間信息收集組件)

    Vue3時(shí)間軸組件問(wèn)題記錄(時(shí)間信息收集組件)

    本文介紹了如何在Vue3項(xiàng)目中封裝一個(gè)時(shí)間信息收集組件,采用雙向綁定響應(yīng)式數(shù)據(jù),通過(guò)對(duì)Element-Plus的Slider組件二次封裝,實(shí)現(xiàn)時(shí)間軸功能,解決了小數(shù)計(jì)算導(dǎo)致匹配問(wèn)題和v-model綁定組件無(wú)效問(wèn)題,感興趣的朋友跟隨小編一起看看吧
    2024-09-09
  • vue單頁(yè)面改造多頁(yè)面應(yīng)用詳解

    vue單頁(yè)面改造多頁(yè)面應(yīng)用詳解

    本文主要介紹了vue單頁(yè)面改造多頁(yè)面應(yīng)用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • vue使用js-file-download完成導(dǎo)出功能實(shí)例

    vue使用js-file-download完成導(dǎo)出功能實(shí)例

    這篇文章主要介紹了vue使用js-file-download完成導(dǎo)出功能實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue的虛擬DOM使用方式

    vue的虛擬DOM使用方式

    這篇文章主要介紹了vue的虛擬DOM使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-09-09
  • vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址(推薦)

    vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址(推薦)

    這篇文章主要介紹了vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2018-05-05
  • vue仿淘寶訂單狀態(tài)的tab切換效果

    vue仿淘寶訂單狀態(tài)的tab切換效果

    這篇文章主要為大家詳細(xì)介紹了vue仿淘寶訂單狀態(tài)tab切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-11-11

最新評(píng)論