滾動條 scrollTop 平滑滑動

vue 寫法 平滑滑動

 

  gotoRirser (num, index) {
      let that = this
      let elt = this.elt
      let total = 0
      let distance = 0
      let step = 14
      let enterBox = this.enterBox
      function smoothDown () {
        let td = parseInt((total - distance) / 10)
        if (td > step) {
          distance = distance + td
          enterBox.scrollTop = distance
          setTimeout(smoothDown, 10)
        } else {
          enterBox.scrollTop = total
          that.leftTIndex = setTimeout(() => {
            that.scrollLock = true
            that.setLiTyDatasAll()
          }, 1000)
        }
      }

      // 向上滑動
      function smoothUp () {
        let td = (distance - total) / 10
        if (td > step) {
          distance -= td
          enterBox.scrollTop = distance
          setTimeout(smoothUp, 10)
        } else {
          enterBox.scrollTop = total
          that.rightTIndex = setTimeout(() => {
            that.scrollLock = true
            that.setLiTyDatasAll()
          }, 1000)
        }
      }
      setTimeout(() => {
        for (let i = index - 1; i >= 0; i--) {
          let n = this.allBtns[i].num
          let eNode = enterBox.querySelector('#' + elt + n)
          total += eNode.clientHeight
        }
        distance = this.enterBox.scrollTop
        this.scrollLock = false
        if (this.rightTIndex) {
          clearTimeout(this.rightTIndex)
        }
        if (this.leftTIndex) {
          clearTimeout(this.leftTIndex)
        }
        if (total > distance) {
          smoothDown()
        } else {
          smoothUp()
        }
      }, 20)
    },