VUE實現(xiàn)自動滾動簡單示例
更新時間：2023年08月14日 09:26:52 作者：各行棋道丶
這篇文章主要給大家介紹了關(guān)于VUE實現(xiàn)自動滾動的相關(guān)資料,現(xiàn)在很多數(shù)據(jù)展示大屏都會有很多的自動滾動的列表,文中通過代碼實例介紹的非常詳細,需要的朋友可以參考下
一、場景
當內(nèi)容超出元素固定高度時可以進行自動滾動。
二、實現(xiàn)
首先，給需要自動滾動的元素設定統(tǒng)一的name，方便后續(xù)滾動方法獲取元素的信息，我這里舉例統(tǒng)一用scrollBox：
<el-card class="text" name="scrollBox"> 文本內(nèi)容 </el-card>
其次，給需要自動滾動的元素設置樣式，要滿足高度固定，超出高度時出現(xiàn)滾動欄：
height: 600px; overflow: auto;
最后，就是自動滾動方法：scrollHeight為元素展開的全部高度，scrollTop為滾動滑塊所在的位置高度，clientHeight為滾動滑塊的高度。
updateScrollTop() {
const scrollList = document.getElementsByName('scrollBox')
for (let i = 0; i < scrollList.length; i++) {
const x = scrollList[i]
this.scrollThen(x).then()
}
},
async scrollThen(x) {
do {
await new Promise(resolve => {
setTimeout(() => {
resolve()
}, 100)
})
if (parseFloat(x.clientHeight / x.scrollHeight) < 0.8) {
if (x.scrollHeight - x.scrollTop === x.clientHeight) {
x.scrollTop = 0
} else {
x.scrollTop++
}
}
} while (true)
}然后在頁面初始化時，調(diào)用滾動方法即可：
mounted() {
this.updateScrollTop()
}附：vue進入頁面自動滾動相應位置
mounted() {
this.$nextTick(() => {
setTimeout(() => {
window.scrollTo({ top: 657, behavior: "smooth" })
}, 200)
})
},
// top滾動位置總結(jié)
到此這篇關(guān)于VUE實現(xiàn)自動滾動的文章就介紹到這了,更多相關(guān)VUE自動滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue3.x頁面功能拆分方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
在vue開發(fā)中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規(guī)范統(tǒng)一的接口，本文就來介紹一下vue 項目接口管理，具有一定的參考價值，感興趣的小伙伴可以一起來了解一下2019-01-01
在實際項目開發(fā)過程中，如果公共數(shù)據(jù)比較多我們會使用vuex做公共狀態(tài)管理，但是在對瀏覽器進行刷新操作的時候，會導致vuex內(nèi)的數(shù)據(jù)丟失，這種情況有些時候是沒問題的，但是有的時候我們需要某些數(shù)據(jù)可以持久化的保存，這樣就需要做對應的處理2023-01-01
這篇文章主要介紹了在Echarts圖中給坐標軸加一個標識線markLine，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue-resource安裝過程及使用方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
Vue中的ref作用詳解(實現(xiàn)DOM的聯(lián)動操作)
這篇文章主要介紹了Vue中的ref作用詳解(實現(xiàn)DOM的聯(lián)動操作),需要的朋友可以參考下2017-08-08
一個組件相當于是一個小模塊,它是html、css與js的集合體,可以用于描述頁面中的某個結(jié)構(gòu)(模塊),下面這篇文章主要給大家介紹了關(guān)于輕松學Vue組件之單文件組件的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了VUE項目中封裝Echart折線圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本文是作者通過實際項目的優(yōu)化實踐進行總結(jié)而來，希望讀者讀完本文，有一定的啟發(fā)思考，從而對自己的項目進行優(yōu)化起到幫助2022-08-08
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08