scrollIntoView+锚点两种方式实现页面的平滑滚动，长页面分页

Posted 2022-12-13 yw00yw

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节点

效果

点击即可实现页面级别分页