亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUE實現(xiàn)自動滾動簡單示例

 更新時間：2023年08月14日 09:26:52   作者：各行棋道丶  
這篇文章主要給大家介紹了關(guān)于VUE實現(xiàn)自動滾動的相關(guān)資料,現(xiàn)在很多數(shù)據(jù)展示大屏都會有很多的自動滾動的列表,文中通過代碼實例介紹的非常詳細,需要的朋友可以參考下

一、場景

當內(nèi)容超出元素固定高度時可以進行自動滾動。

二、實現(xiàn)

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

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

其次，給需要自動滾動的元素設(shè)置樣式，要滿足高度固定，超出高度時出現(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進入頁面自動滾動相應(yīng)位置

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)文章

最新評論