Simple example of automatic scrolling in VUE

1. Scene

Automatic scrolling can be performed when the content exceeds the fixed height of the element.

2. Realization

First, set a unified name for the elements that need to be automatically scrolled to facilitate subsequent scrolling methods to obtain element information. I will give an example here to use scrollBox:

<el-card class="text" name="scrollBox">
  Text content
</el-card>

Secondly, set styles for elements that need to be automatically scrolled, and to meet the height fixed, the scroll bar appears when it exceeds the height:

height: 600px;
overflow: auto;

Finally, there is the automatic scrolling method: scrollHeight is the entire height of the element expansion, scrollTop is the height of the position where the scroll slider is located, and clientHeight is the height of the scroll slider.

    updateScrollTop() {
      const scrollList = ('scrollBox')
      for (let i = 0; i < ; i++) {
        const x = scrollList[i]
        (x).then()
      }
    },
    async scrollThen(x) {
      do {
        await new Promise(resolve => {
          setTimeout(() => {
            resolve()
          }, 100)
        })
        if (parseFloat( / ) < 0.8) {
          if ( -  === ) {
             = 0
          } else {
            ++
          }
        }
      } while (true)
    }

Then when the page is initialized, call the scrolling method:

  mounted() {
    ()
  }

Attachment: Vue enters the page and automatically scrolls the corresponding position

mounted() {
  this.$nextTick(() => {
      setTimeout(() => {
        ({ top: 657, behavior: "smooth" })
      }, 200)
    })
  },
// topScroll position

Summarize

This is the end of this article about VUE's automatic scrolling. For more related VUE automatic scrolling content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!