h5列表滚动到指定位置（vue2）

<template>

  <div ref="scrollview" id="inside" @touchend="scrollChange">

    <li v-for="(item, index) in list" :key="index" :class="'js-lipei' + index">

      {{item.title}}

    </li>

  </div>

</template>

<script>
export default {
  data() {
    return {
      list: [
        {title: '----------我是第1 条----------'},
        {title: '----------我是第2 条----------'},
        {title: '----------我是第3 条----------'},
        {title: '----------我是第4 条----------'},
        {title: '----------我是第5 条----------'},
        {title: '----------我是第6 条----------'},
        {title: '----------我是第7 条----------'},
        {title: '----------我是第8 条----------'},
        {title: '----------我是第9 条----------'},
        {title: '----------我是第10条----------'},
        {title: '----------我是第11条----------'},
        {title: '----------我是第12条----------'},
        {title: '----------我是第13条----------'},
        {title: '----------我是第14条----------'},
        {title: '----------我是第15条----------'},
        {title: '----------我是第16条----------'},
        {title: '----------我是第17条----------'},
        {title: '----------我是第18条----------'},
        {title: '----------我是第19条----------'},
        {title: '----------我是第20条----------'},
        {title: '----------我是第21条----------'},
        {title: '----------我是第22条----------'},
        {title: '----------我是第23条----------'},
        {title: '----------我是第24条----------'},
        {title: '----------我是第25条----------'},
        {title: '----------我是第26条----------'},
        {title: '----------我是第27条----------'},
        {title: '----------我是第28条----------'},
        {title: '----------我是第29条----------'},
        {title: '----------我是第30条----------'},
      ],
    };
  },
  mounted() {
    // 监听页面滚动事件
    const sctollview = this.$refs['scrollview'];
    sctollview.addEventListener("scroll", this.scrollChange, true);
    // 滚动条重定向
    this.goScroll();
  },
  methods: {
    scrollChange(e) {
      // 判断是否到了最顶部
      if (e.target.offsetTop <= 0) {
        console.log("滚动到了最顶部")
      }else if(e.target.offsetTop > 0) {
        console.log("正在滚动---------->", e);
      }
      if(e.path[0].className != ''){
        sessionStorage.setItem('scrollTop', e.path[0].className)
      }
    },
    goScroll() {
      if(sessionStorage.getItem('scrollTop') != null){
        document.getElementsByClassName(sessionStorage.getItem('scrollTop'))[0].scrollIntoView({
          block: 'center', //center表示将视口的中间和元素的中间对齐
          behavior: 'instant' // 直接滚到目标
        })
      }
    }
  },
  beforeDestroy() {
    // 销毁监听页面滚动事件
    const sctollview = this.$refs['scrollview'];
    sctollview.removeEventListener("scroll", this.scrollChange, true);
  },
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
div{
  width: 100%;
  overflow-Y: auto;
  padding: 0 0 1px 0;
}
li {
  list-style: none;
  background: #fff;
  font-size: 22px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-bottom: 1px double #eee;
}
</style>

如果 scrollIntoView undefined的话mounted替换成updated

vue列表滚动

scrollIntoView方法 

behavior
表示滚动方式。auto表示使用当前元素的scroll-behavior样式。instant和smooth表示直接滚到底和使用平滑滚动。

block
表示块级元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说，就是竖直方向。start表示将视口的顶部和元素顶部对齐；center表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；nearest表示就近对齐。

inline
表示行内元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说，就是水平方向。其值与block类似。