无限的页面
重要程度: 5
创建一个无限的页面。当访问者滚动到页面末端时，它会自动将当期日期时间附加到文本中（以便访问者可以滚动更多内容）。
像这样：
请注意滚动的两个重要特性：
- 滚动是“弹性的”。在某些浏览器/设备中，我们可以在文档的顶端或末端稍微多滚动出一点（超出部分显示的是空白区域，然后文档将自动“弹回”到正常状态）。
- 滚动并不精确。当我们滚动到页面末端时，实际上我们可能距真实的文档末端约 0-50px。
因此，“滚动到末端”应该意味着访问者离文档末端的距离不超过 100px。
P.S. 在现实生活中，我们可能希望显示“更多信息”或“更多商品”。
解决方案的核心是一个函数，当我们在页面末端时，该函数可以向页面添加更多日期（或者在实际开发中是加载更多内容）。
我们可以立即调用它，并将其添加为 window.onscroll 处理程序。
最重要的问题是：“如何检测页面滚动到了末端？”
让我们使用相对于窗口的坐标。
文档（document）在 <html> 标签中被表示（被包含）为 document.documentElement。
我们可以通过 document.documentElement.getBoundingClientRect() 来获取整个文档相对于窗口的坐标。bottom 属性将是文档末端的相对于窗口的坐标。
例如，如果整个 HTML 文档的高度是 2000px，那么：
// 当我们在页面顶端时
// 相对于窗口 top = 0
document.documentElement.getBoundingClientRect().top = 0
// 相对于窗口 bottom = 2000
// 如果文档太长，那么可能会远远超出窗口底部
document.documentElement.getBoundingClientRect().bottom = 2000如果我们向下滚动 500px，那么：
// 文档顶端在窗口之方 500px
document.documentElement.getBoundingClientRect().top = -500
// 文档末端相对于窗口近了 500px
document.documentElement.getBoundingClientRect().bottom = 1500当我们滚动到文档末端时，假设窗口高度为 600px：
// 文档顶端在窗口上方 -1400px
document.documentElement.getBoundingClientRect().top = -1400
// 文档末端相对于窗口坐标为 600px
document.documentElement.getBoundingClientRect().bottom = 600请注意，bottom 不能为 0，因为它永远不会到达窗口顶部。bottom 坐标的最低限度是窗口高度（我们假设其为 600），我们无法再向上滚动了。
我们可以获得窗口的高度为 document.documentElement.clientHeight。
对于本任务，我们需要知道何时文档末端距窗口底部不超过 100px（即，如果窗口高度为 600px，则为 600-700px）。
所以，函数如下：
function populate() {
while(true) {
// 文档末端
let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// 如果用户将页面滚动的距离不够远（文档末端距窗口底部 >100px）
if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
// 让我们添加更多数据
document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
}
}