千锋Python-晨晨Python：一个简洁且有趣的无限下拉方案

北京联盟_本文原题：Python：一个简洁且有趣的无限下拉方案
长列表渲染、无限下拉也算是前端开发老生常谈的问题之一了，这里给大家介绍一种简洁、巧妙、高效的方式来实现。话不多说，看下图，也许你可以发现什么！

本文插图

不知你是否从上面这张图中注意到了什么，比如只是渲染了可视区域的部分 DOM，滚动过程中只是外层容器的 padding 在改变？
前一点很好理解，我们考虑到性能，不可能将一个长列表（甚至是一个无限下拉列表）的所有列表元素都进行渲染；而后一点，则是本文所介绍方案的核心之一！
不卖关子，提前告诉你该方案的要素就是两个：

Intersection Observer
padding

说明了要素，也许你可以尝试着开始思考，看你是否能猜到具体的实现方案。
方案介绍
Intersection Observer
基本概念
一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事。传统的各种方案不但复杂，而且性能成本很高，比如需要监听滚动事件，然后查询 DOM , 获取元素高度、位置，计算距离视窗高度等等。
这就是 Intersection Observer 要解决的问题。它为开发人员提供一种便捷的新方法来异步查询元素相对于其他元素或视窗的位置，消除了昂贵的 DOM 查询和样式读取成本。
兼容性
主要在 Safari 上兼容性较差，需要 12.2 及以上才兼容，不过还好，有 polyfill 可食用。
一些应用场景

页面滚动时的懒加载实现。
无限下拉（本文的实现）。
监测某些广告元素的曝光情况来做相关数据统计。
监测用户的滚动行为是否到达了目标位置来实现一些交互逻辑（比如视频元素滚动到隐藏位置时暂停播放）。

padding 方案实现
基本了解 Intersection Observer 之后，接下来就看下如何用 Intersection Observer + padding 来实现无限下拉。
先概览下总体思路：

监听一个固定长度列表的首尾元素是否进入视窗；
更新当前页面内渲染的第一个元素对应的序号；
根据上述序号，获取目标数据元素，列表内容重新渲染成对应内容；
容器 padding 调整，模拟滚动实现。

核心：利用父元素的 padding 去填充随着无限下拉而本该有的、越来越多的 DOM 元素，仅仅保留视窗区域上下一定数量的 DOM 元素来进行数据渲染。
1、监听一个固定长度列表的首尾元素是否进入视窗
// 观察者创建
this.observer = new IntersectionObserver(callback, options);
// 观察列表第一个以及最后一个元素
this.observer.observe(this.firstItem);
this.observer.observe(this.lastItem);
我们以在页面中渲染固定的 20 个列表元素为例，我们对第一个元素和最后一个元素，用 Intersection Observer 进行观察，当他们其中一个重新进入视窗时， callback 函数就会触发：
const callback = (entries) => {
entries.forEach((entry) => {
if (entry.target.id === firstItemId) {
// 当第一个元素进入视窗
} else if (entry.target.id === lastItemId) {
// 当最后一个元素进入视窗
}
});
};
2、更新当前页面渲染的第一个元素对应的序号 (firstIndex)
拿具体例子来说明，我们用一个数组来维护需要渲染到页面中的数据。数组的长度会随着不断请求新的数据而不断变大，而渲染的始终是其中一定数量的元素，比如 20 个。那么：