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>
- 精准到每个表单定位，需要提供 id 选项，根据 id 来跳表单。
- 主要逻辑：根据 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>
