Element.scrollIntoView() 实现题目定位

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内

语法

element.scrollIntoView();  // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop);  // Boolean型参数 
element.scrollIntoView(scrollIntoViewOptions);  // Object型参数

参数

• alignToTop（boolean）

  • true。元素的顶端将和其所在滚动区的可视区域的顶端对齐。
  • false。元素的底端将和其所在滚动区的可视区域的底端对齐

• scrollIntoViewOptions（object）

element.scrollIntoViewOptions({
  behavior: 'smooth',
  block: 'center'
})

• behavior。这个选项决定页面是如何滚动。
  • auto：瞬间跳到相应的位置。
  • instant：瞬间跳到相应的位置。
  • smooth：有动画缓冲的过程。
• block。元素和其所在滚动区的可视区域的对齐方式。
  • start：顶部对齐。
  • center：中间对齐。
  • end：底部对齐。

示例

使用 Vue 实现一个题目定位的功能，提交答案验证必填的 input、textarea、单选题多选题，实现定位。

<div id="app">
    <div v-for="(item,index) in list" :key="item.id">
        <div class="option-content">
            <input :id="'inputId' + item.id" ref="inputName" v-model="item.value" />
            <textarea :id="'textareaId'+item.id" ref="textareaName" v-model="item.value"></textarea>
        </div>
    </div>
    <div class="sub-box">
        <div class="submit-btn" @click="getSubmit()">确定</div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
    data() {
        return {
            list: []
        }
    },
    methods: {
        // 题目定位
        inputAddTimer(item) {
            setTimeout(() => {
                let inputArr =  this.$refs.inputName;
                let textareaArr = this.$refs.textareaName;
                let inputId = 'inputId-' + op.value.option_id;
                let textareaId = 'textareaId-' + op.value.option_id;
                inputArr.forEach(opInput => {
                    if(opInput.id == inputId){
                        opInput.scrollIntoView({ behavior: "smooth", block: "center"});
                    };
                });
                textareaArr.forEach(opTextarea => {
                    if(opTextarea.id == textareaId){
                        opTextarea.scrollIntoView({ behavior: "smooth", block: "center"});
                    };
                });
            }, 1000);
        },
        getSubmit() {
            var errorText = '';
            this.list.some(item => {
                if(!item.value.trim()) {
                    errorText = '不能为空'
                    this.inputAddTimer(item)
                    if(errorText) {
                        return true
                    }
                }
            })
        }
    }
});
</script>

1. 精准到每个表单定位，需要提供 id 选项，根据 id 来跳表单。
2. 主要逻辑：根据 ref 定义的 id，如果等于我们传入的表单 id，验证失败时，跳转到对应题目，并弹窗提示。

<input :id="'inputId' + item.id" ref="inputName" v-model="item.value" />
<textarea :id="'textareaId'+item.id" ref="textareaName" v-model="item.value"></textarea>
<script>
inputAddTimer(item) {
    setTimeout(() => {
        let inputArr =  this.$refs.inputName;
        let textareaArr = this.$refs.textareaName;
        let inputId = 'inputId-' + item.id;
        let textareaId = 'textareaId-' + item.id;
        inputArr.forEach(opInput => {
            if(opInput.id == inputId){
                opInput.scrollIntoView({ behavior: "smooth", block: "center"});
            };
        });
        textareaArr.forEach(opTextarea => {
             if(opTextarea.id == textareaId){
                 opTextarea.scrollIntoView({ behavior: "smooth", block: "center"});
             };
         });
    }, 1000);
},
<script>