Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域
MDN地址
问题描述: 页面的最底部有分页器,但是每次点击切换页码,要让页面恢复到最顶端
image.png
语法
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
参数有两种写法
alignToTop : 布尔值类型
+
true元素的顶端将和其所在滚动区的可视区域的最顶端对齐, 等同于scrollIntoViewOptions: {block: "start", inline: "nearest"}默认值
+false元素的底部将和其所在的滚动区域的可视区域的底部的对齐,等同于scrollIntoViewOptions: {block: "end", inline: "nearest"}默认值
scrollIntoViewOptions :对象类型(可选参数)
一个包含下列属性的对象：
behavior可选
定义动画过渡效果，"auto"或 "smooth"之一。默认为"auto"。
block可选
定义垂直方向的对齐，"start", "center", "end", 或"nearest"之一。默认为"start"。
inline可选
定义水平方向的对齐，"start", "center", "end", 或"nearest"之一。默认为"nearest"。
示例
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
案例:
效果 --每次点击按钮,新增的元素都在滚动区域的最底端
<template>
<div>
<div ref="contain" class="container"></div>
<button @click="toadd">点击添加元素</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
toadd() {
this.num++;
let outdom = this.$refs.contain;
let vli = document.createElement("li");
vli.innerText = this.num;
outdom.appendChild(vli);
vli.scrollIntoView({
behavior: "smooth",
block: "end"
});
}
}
};
</script>
<style>
.app {
text-align: center;
width: 100vw;
height: 100vh;
}
.container {
width: 100px;
height: 200px;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
}
button {
width: 100px;
display: block;
margin: 30px auto;
}
li {
margin-top: 20px;
}
</style>
