vue scroll 监听，点击按钮自动滚动到相应的信息展示

PS前言：最近做项目的时候遇到个问题，就是scroll左右联动的显示问题，具体情况是这样子的

我点击右侧的题号，左侧就滚动到相应的题，费劲巴拉了半天，找各种插件，都不行，最后还是自己写了一个简单的，现在记录一下，给小伙伴遇到相应的问题的话可以参考一下

vue/html部分

//这部分是点击的
<el-row>
   <template v-for="(questionsDatas, i) in stList">
     <el-col :span="3" style="margin-right:15px;">
       <el-button :type="getdtk(questionsDatas)" class="option-bg" size="mini"
                  @click="optionNumClick(questionsDatas)">
         {{i + 1}}</el-button>
     </el-col>
   </template>
 </el-row>
//这部分是题干、内容
<el-card>
...
<div class="list-questions" ref="listQuestions" :id="questionsData.recid">//这个id很重要，是和上面的点击事件中的id是一个
</div>
</el-card>

js部分

data () {
   return {
   //这个东西可有可无，在下面会阐述他的用途
   	visibleButton: false,
   }
},
mounted() {
//添加滚动监听
 window.addEventListener('scroll', this.handleScroll, true);
},
methods:{
	//监听滚动  ，现在我把页面中间的卡片标签高度给设置为固定了，
    //如果页面中间的高度不固定法的话，可以在页面的右下角设置一个回到顶部的按钮
    //这个this.visibleButton就可以控制回到顶部的按钮是否显示的
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      // console.log("scrollTop",scrollTop);
      this.visibleButton = scrollTop > 500;
    },
    //点击数字滚动到相应的试题
    optionNumClick (data) {
    //点击题号，传过来数据，把id取到，然后在滚动就是了
      let target = document.getElementById(data.recid);
      if (target) {
        target.scrollIntoView();
      }
    },
}

就是这么简单，要是还是实现不了的话，可以留言问我