欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)的列表,文中通過代碼實(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為元素展開的全部高度，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)
    }

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

  mounted() {
    this.updateScrollTop()
  }

附：vue進(jìn)入頁面自動(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)文章

最新評(píng)論