h5列表/el-table组件的滚动条回滚

h5列表页

 :for=""给查询条件item.attributes['for].nodeValue或者item.attributes[0].nodeValue赋值

滚动条的父元素加ref

<div ref="task">
  <div ref="listRef" 
    :for="item.id"
    v-for="(item,index) in list" 
    :key="index"></div>
</div>

滚动条定位到指定位置

this.$nextTick(() => {
							let target = null
							// 循环获取指定元素高度
							this.$refs.listRef.some((item, index) => {
								if (item.attributes['for'].nodeValue == d.taskId) {
									target = item.offsetTop
								}
							})
							let top = 0
							const timeTop = setInterval(() => {
								// h5用body pc用documentElement
								//滚动条每次滚动100
								this.$refs.task.scrollTop = top += 100
								if (top > target) {
									this.$refs.task.scrollTop = target - 110;
									clearInterval(timeTop)
								}
							}, 5) //每次滚动的时间间隔
})

子组件的滚动条回滚

根据ref获取高度数据

<el-table :data="parkingData.list"
                      height="578px"
                      ref="refTable"
                      @row-click="tabClick">

if (this.showList) {
          // 等列表渲染完，不然获取不到ref
          this.$nextTick(() => {
            let i = null // 点击行的index
            let target = null // 点击行元素的高度
            let row = [] // 所有行元素dom
            // 循环ref根据点击行的id获取index
            this.$refs.refTable.tableData.some((item, index) => {
              if (item.id === this.rid) {
                i = index
              }
            })
            row = this.$refs.refTable.$el.getElementsByClassName('el-table__row')
            let r = 0 // 行元素dom的index
            // 循环所有行元素dom，根据index获取对应dom的高度
            for (var item of row) {
              if (r === i) target = item.offsetTop
              r++
            }
            let top = 0 // 滚动条高度的判断条件
            // 滚动条滑动事件
            const timeTop = setInterval(() => {
              // 获取ref.refTable的滚动条高度
              this.$refs.refTable.bodyWrapper.scrollTop = top += 200
              if (target < top) {
                clearInterval(timeTop)
              }
            })
          })
        }