1.scrollIntoView() 简介:
scrollIntoView()
方法将调用它的元素滚动到浏览器窗口的可见区域。页面(容器)可滚动时才有用
2.scrollIntoView(alignToTop)
alignToTop参数可选true或false,默认是true,展示在可视页面顶部,false,展示在底部。
3.项目的实际应用:分为html和js俩部分
1.html方面。给div加一个 id就可以。我的题目是v-for循环的,所以我的id用:id='item,id'
<div style="margin-left:30px;flex: 1;padding-right: 20px; overflow-y: auto; max-height: 600px;">
<div>
<div v-for="item in singleChoice" :key="item.id" style="margin:10px 0;" :id="item.id">
<div style="display: flex;justify-content: space-between;">
<div style=" word-wrap:break-word;text-align:left;width:650px">{{ item.question }}</div>
<div>(3分)</div>
<div style="margin-left:50px" :class="item.isDoubt? 'isDoubtQuestion' : 'doubtQuestion'" @click="doubtQuestion(item)">?</div>
</div>
<div class="radioGroup">
<el-radio v-for="val in item.option" :key="val.id" style="margin:10px 0;"
v-model="item.selectedOption" :label="val.id" @input="changeRadio(item)">{{ val.title }}
</el-radio>
</div>
</div>
</div>
</div>
2.js方面。用document.getElementById(id).scrollIntoView()
goQuestion(item) {
const element = document.getElementById(item);
if (element) {
element.scrollIntoView();
} else {
console.error('Element not found:', '#' + item);
}
},
这样就可以实现了