每日 30 秒 ⏱ 判断是否为页面底部

简介

分页、优化、可视区域、无限加载

写前端页面时最常常遇到的开发需求之一就是 渲染后端数据返回的数据对象，当数据对象数量极多的时候便须要进行分页。

常见的分页方式有三种：

1. 在页面底部生成 上一页、下一页、页面列表 按钮。

   • 用户能够很直接的选择本身须要浏览的页面。
   • 不须要担忧页面数据过多形成的卡顿。
   • 比起 自动加载更多数据 略显不智能。

2. 在页面底部生成 加载更多数据 按钮。

   • 相对于页面底部生成分页相关按钮体验好一点
   • 用户能够控制本身是否须要加载更多数据。
   • 比起 自动加载更多数据 略显不智能。
   • 须要注意页面数据过多形成的卡顿。

3. 当用户滚动到页面底部时 自动加载更多数据。

   • 更符合用户直觉体验很好。
   • 须要注意页面数据过多形成的卡顿。
   • 若是页脚有其余数据用户须要翻遍数据才能看到页脚。

固然分页没有绝对的银弹得根据不一样的状况进行略微的调整和交叉搭配使用分页方式。例如：页面页脚有须要用户查看的数据时，可使用 自动加载更多数据，当加载二到三页时提示 加载更多数据 按钮，使得特定用户能够较为方便的看到页脚内容更多的情景就不一一列举了。

页面数据过多形成的卡顿能够参考 每日 30 秒之 chunk 中给出的情景案例，利用 数据分组显示 来减小 DOM 节点进而优化页面卡顿，这里不讨论分页及其相关的优化。

今天分享的代码是分页过程当中会用到的一个函数 判断是否到达了页面底部：

// 该源码来自于 https://30secondsofcode.org
const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

代码分析

窗口可见区域的高度 和 窗口已经滚动的距离高度 获得当前页面所处的位置：

document.documentElement.clientHeight + window.scrollY

再与 整个页面的高度 做比较来判断是否已经到达了页面底部，若是 整个页面的高度 不存在则使用 窗口可见区域的高度 作代替：

... >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)

小技巧：利用 || 技巧来初始化数据

使用场景

作一个无限加载数据项的分页功能，当页面到达底部时进行数据加载。

// 监听页面滚动
document.addEventListener('scroll', () => {
    // 若是到达页面底部
    if(bottomVisible()) {
        // 1.发送网络请求获取数据
        // 2.插入数据到页面
    }
});

类似代码

判断是否到达了页面顶部

const topVisible = () => window.scrollY == 0

一块儿成长

在困惑的城市里总少不了并肩同行的 伙伴 让咱们一块儿成长。

• 若是您想让更多人看到文章能够点个 点赞。
• 若是您想激励小二能够到 Github 给个 小星星。
• 若是您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop