vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置

更新時(shí)間：2022年08月13日 09:07:32 作者：Hero_rong

這篇文章主要介紹了vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue滾動(dòng)條到頂部或到指定位置

首先在 html 里面給你要滾動(dòng)的元素設(shè)置屬性 ref='box' 這就相當(dāng)于是DOM操作了，

然后根據(jù) 屬性名找到則個(gè)元素就可以操作啦

vue設(shè)置滾動(dòng)條

vue如何在div中設(shè)置滾動(dòng)條呢？

首先需要寫(xiě)一下css樣式

<div
? ? :style="{'max-height': this.timeLineHeight + 'px' }"
? ? style="overflow-y:scroll;"
?> ? ? ? ? ? ?
</div>

在這個(gè)div中，放的是你寫(xiě)的前端代碼。它是可以滾動(dòng)的。

在mounted中改變最大高度的大小。這個(gè)減210，它減的是我標(biāo)頭的高度，你的具體高度需要根據(jù)實(shí)際情況來(lái)減。

mounted() {
? ? this.timeLineHeight = document.documentElement.clientHeight - 210;
? ? window.onresize = () => {
? ? ? this.timeLineHeight = document.documentElement.clientHeight - 210;
? ? };
? },

在data中聲明一下屬性

?data() {
? ? return {
? ? ? timeLineHeight: "",
? ? }
? }

這樣就可以了！

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue基本使用之對(duì)象提供的屬性功能
這篇文章主要介紹了Vue基本使用之對(duì)象提供的屬性功能實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04
15分鐘上手vue3.0(小結(jié))
這篇文章主要介紹了15分鐘上手vue3.0，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
vue3實(shí)現(xiàn)在新標(biāo)簽中打開(kāi)指定網(wǎng)址的方法
我希望點(diǎn)擊查看按鈕的時(shí)候,能夠在新的標(biāo)簽頁(yè)面打開(kāi)這個(gè)文件的地址進(jìn)行預(yù)覽,該如何實(shí)現(xiàn)呢,下面小編給大家?guī)?lái)了基于vue3實(shí)現(xiàn)在新標(biāo)簽中打開(kāi)指定的網(wǎng)址,感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式
這篇文章主要介紹了關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新
Vue是一款流行的JavaScript框架，它提供了數(shù)據(jù)響應(yīng)式更新的能力，可以讓我們輕松地更新數(shù)據(jù)，并自動(dòng)更新視圖，本文將介紹Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新，包括使用Vue的響應(yīng)式系統(tǒng)、使用計(jì)算屬性和使用Vue的watcher,需要的朋友可以參考下
2023-06-06
vue3.0 上手體驗(yàn)
vue3.0 beta 版本已經(jīng)發(fā)布有一段時(shí)間了，今天這篇文章就帶大家體驗(yàn)一下，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
vue-cli3環(huán)境變量與分環(huán)境打包的方法示例
這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
解決vue $http的get和post請(qǐng)求跨域問(wèn)題
這篇文章主要介紹了解決vue $http的get和post請(qǐng)求跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-06-06
淺析vue3項(xiàng)目中自定義指令的運(yùn)用
自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力，通過(guò)自定義指令，我們可以直接在模板中使用指令名，下面我們就來(lái)看看項(xiàng)目中具體如何使用自定義指令的吧
2023-08-08