@[TOC](scrollIntoView() 方法实现元素滚动)

element.scrollIntoView()

Element 接口（dom元素）的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

应用场景

点击页面顶部的题号标签tag实现滚动到具体题目位置。goAnchor是封装 scrollIntoView()后的方法，通过传入css选择器定位具体dom元素。

html结构

题号标签

<span :key="item.itemOrder"  v-for="item in answer.answerItems">
    <el-tag :type="questionCompleted(item.completed)" class="do-exam-title-tag" @click="goAnchor('#question-'+item.itemOrder)">{{item.itemOrder}}</el-tag>
</span>

题目html

<el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0">
    <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder+'.'"
         v-for="questionItem in titleItem.questionItems"
         class="exam-question-item" label-width="50px" 
         :id="'question-'+ questionItem.itemOrder">
              <QuestionEdit :qType="questionItem.questionType" :question="questionItem"
                              :answer="answer.answerItems[questionItem.itemOrder-1]"/>
    </el-form-item>
</el-card>

滚动方法封装

goAnchor (selector) {
      this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
},

$el.querySelector(selector)获取具体都没元素，这里selector参数传入的是id选择器#question-'+item.itemOrder，也就是题号，scrollIntoView（）实现滚动到dom元素。
behavior定义动画过渡效果，“instant” "auto"或 “smooth” 之一。默认为 “auto”;
block定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”;
inline定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。

vue中$总结

vm.$el
获取Vue实例关联的DOM元素；

vm.$data
获取Vue实例的data选项（对象）

vm. o p t i o n s 获取 V u e 实例的自定义属性（如 v m . options 获取Vue实例的自定义属性（如vm. options获取Vue实例的自定义属性（如vm.options.methods,获取Vue实例的自定义属性methods）

vm. r e f s 获取页面中所有含有 r e f 属性的 D O M 元素（如 v m . refs 获取页面中所有含有ref属性的DOM元素（如vm. refs获取页面中所有含有ref属性的DOM元素（如vm.refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）