scrollIntoView
简介
该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
语法
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); //布尔参数
element.scrollIntoView(scrollIntoViewOptions); //对象参数
用法
// 点击菜单实现滚动
handleChildNodeCode (val) {
const dom = document.getElementById(val[0]);
if (val[0] && dom) {
this.$nextTick(() => {
dom.scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
})
}
},
页面绑定唯一的id
通过scrollIntoView实现长页面分页
首先获取页面上所有的分页类
比如:我的长页面有几十个一定高度的页面组成,规则就是每个子页面都有一个相同的类:比如full_page
获取所有类名为full_page的dom
mounted () {
window.onload = () => { // 确保页面中所有的dom都渲染完成
this.classFullPageList = document.getElementsByClassName('full_page');
this.totalPageIndex = this.classFullPageList.length;
}
},
点击分页
// 上一页
handlePreviousPage () {
if (this.pageIndex > 0) { // 注意数组的下标是从0开始
this.pageIndex--;
this.classFullPageList[this.pageIndex].scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
}
},
// 下一页
handleNextPage () {
if (this.pageIndex < this.totalPageIndex - 1) {
this.pageIndex++;
this.classFullPageList[this.pageIndex].scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
}
}
变量的定义
totalPageIndex: 0, // 总页数
pageIndex: 0, // 当前页
classFullPageList: [], // 页面上所有class为full_page的dom节点
效果
点击即可实现页面级别分页