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項(xiàng)目中使用sass語(yǔ)法問(wèn)題
sass是一個(gè)最初由Hampton Catlin設(shè)計(jì)并由Natalie Weizenbaum開(kāi)發(fā)的層疊樣式表語(yǔ)言。這篇文章主要介紹了在vue項(xiàng)目中使用sass語(yǔ)法,需要的朋友可以參考下2019-07-07
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
本篇文章主要介紹了Vue中如何實(shí)現(xiàn)輪播圖的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue3 reactive 請(qǐng)求接口數(shù)據(jù)賦值后拿不到的問(wèn)題及解決方案
這篇文章主要介紹了vue3 reactive 請(qǐng)求接口數(shù)據(jù)賦值后拿不到的問(wèn)題及解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
簡(jiǎn)單了解Vue + ElementUI后臺(tái)管理模板
這篇文章主要介紹了簡(jiǎn)單了解Vue + ElementUI后臺(tái)管理模板,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了Vue3?中的插件和配置推薦大全，本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開(kāi)發(fā)時(shí),讓我解決一個(gè)elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇Vue-component全局注冊(cè)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
emits是Vue3新增的選項(xiàng),emits主要作用在子組件中,用于接收在父組件中綁定的方法,這篇文章主要給大家介紹了關(guān)于vue3.x中emits的基本用法,需要的朋友可以參考下2022-07-07