快捷導(dǎo)航

VUE實(shí)現(xiàn)自動(dòng)滾動(dòng)簡(jiǎn)單示例

更新時(shí)間：2023年08月14日 09:26:52 作者：各行棋道丶

這篇文章主要給大家介紹了關(guān)于VUE實(shí)現(xiàn)自動(dòng)滾動(dòng)的相關(guān)資料,現(xiàn)在很多數(shù)據(jù)展示大屏都會(huì)有很多的自動(dòng)滾動(dòng)的列表,文中通過(guò)代碼實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下

一、場(chǎng)景

當(dāng)內(nèi)容超出元素固定高度時(shí)可以進(jìn)行自動(dòng)滾動(dòng)。

二、實(shí)現(xiàn)

首先，給需要自動(dòng)滾動(dòng)的元素設(shè)定統(tǒng)一的name，方便后續(xù)滾動(dòng)方法獲取元素的信息，我這里舉例統(tǒng)一用scrollBox：

<el-card class="text" name="scrollBox">
  文本內(nèi)容
</el-card>

其次，給需要自動(dòng)滾動(dòng)的元素設(shè)置樣式，要滿足高度固定，超出高度時(shí)出現(xiàn)滾動(dòng)欄：

height: 600px;
overflow: auto;

最后，就是自動(dòng)滾動(dòng)方法：scrollHeight為元素展開(kāi)的全部高度，scrollTop為滾動(dòng)滑塊所在的位置高度，clientHeight為滾動(dòng)滑塊的高度。

    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)
    }

然后在頁(yè)面初始化時(shí)，調(diào)用滾動(dòng)方法即可：

  mounted() {
    this.updateScrollTop()
  }

附：vue進(jìn)入頁(yè)面自動(dòng)滾動(dòng)相應(yīng)位置

mounted() {
  this.$nextTick(() => {
      setTimeout(() => {
        window.scrollTo({ top: 657, behavior: "smooth" })
      }, 200)
    })
  },
// top滾動(dòng)位置

總結(jié)

到此這篇關(guān)于VUE實(shí)現(xiàn)自動(dòng)滾動(dòng)的文章就介紹到這了,更多相關(guān)VUE自動(dòng)滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解vue3.x頁(yè)面功能拆分方式
本文主要介紹了vue3.x頁(yè)面功能拆分方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
vue 項(xiàng)目接口管理的實(shí)現(xiàn)
在vue開(kāi)發(fā)中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要定義規(guī)范統(tǒng)一的接口，本文就來(lái)介紹一下vue 項(xiàng)目接口管理，具有一定的參考價(jià)值，感興趣的小伙伴可以一起來(lái)了解一下
2019-01-01
Vuex模塊化與持久化深入講解
在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，如果公共數(shù)據(jù)比較多我們會(huì)使用vuex做公共狀態(tài)管理，但是在對(duì)瀏覽器進(jìn)行刷新操作的時(shí)候，會(huì)導(dǎo)致vuex內(nèi)的數(shù)據(jù)丟失，這種情況有些時(shí)候是沒(méi)問(wèn)題的，但是有的時(shí)候我們需要某些數(shù)據(jù)可以持久化的保存，這樣就需要做對(duì)應(yīng)的處理
2023-01-01
在Echarts圖中給坐標(biāo)軸加一個(gè)標(biāo)識(shí)線markLine
這篇文章主要介紹了在Echarts圖中給坐標(biāo)軸加一個(gè)標(biāo)識(shí)線markLine，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Vue-resource安裝過(guò)程及使用方法解析
這篇文章主要介紹了Vue-resource安裝過(guò)程及使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
Vue中的ref作用詳解(實(shí)現(xiàn)DOM的聯(lián)動(dòng)操作)
這篇文章主要介紹了Vue中的ref作用詳解(實(shí)現(xiàn)DOM的聯(lián)動(dòng)操作),需要的朋友可以參考下
2017-08-08
輕松學(xué)Vue組件之單文件組件
一個(gè)組件相當(dāng)于是一個(gè)小模塊,它是html、css與js的集合體,可以用于描述頁(yè)面中的某個(gè)結(jié)構(gòu)(模塊),下面這篇文章主要給大家介紹了關(guān)于輕松學(xué)Vue組件之單文件組件的相關(guān)資料,需要的朋友可以參考下
2023-03-03
VUE項(xiàng)目中封裝Echart折線圖的方法
這篇文章主要為大家詳細(xì)介紹了VUE項(xiàng)目中封裝Echart折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue?項(xiàng)目性能優(yōu)化方案分享
本文是作者通過(guò)實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來(lái)，希望讀者讀完本文，有一定的啟發(fā)思考，從而對(duì)自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助
2022-08-08
el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法
本文主要介紹了el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08