无限页面
重要性：5
创建一个无限页面。当访问者滚动到页面末尾时，它会自动将当前日期时间追加到文本中（以便访问者可以继续滚动）。
像这样
请注意滚动的两个重要特征
- 滚动是“弹性的”。在某些浏览器/设备中，我们可以滚动到文档开始或结束之外（会显示下面的空白区域，然后文档会自动“弹回”正常状态）。
- 滚动是不精确的。当我们滚动到页面末尾时，实际上我们可能距离文档底部 0-50 像素。
因此，“滚动到末尾”应该意味着访问者距离文档末尾不超过 100 像素。
附注：在现实生活中，我们可能希望显示“更多消息”或“更多商品”。
该解决方案的核心是一个函数，它在页面末尾时向页面添加更多日期（或在现实生活中加载更多内容）。
我们可以立即调用它，并将其作为 window.onscroll 处理程序添加。
最重要的是：“如何检测页面是否滚动到底部？”
让我们使用相对于窗口的坐标。
文档由 <html> 标签表示（并包含在其中），即 document.documentElement。
我们可以获取整个文档相对于窗口的坐标，即 document.documentElement.getBoundingClientRect()，bottom 属性将是文档底部的相对于窗口的坐标。
例如，如果整个 HTML 文档的高度为 2000px，那么
// when we're on the top of the page
// window-relative top = 0
document.documentElement.getBoundingClientRect().top = 0
// window-relative bottom = 2000
// the document is long, so that is probably far beyond the window bottom
document.documentElement.getBoundingClientRect().bottom = 2000如果我们向下滚动 500px，那么
// document top is above the window 500px
document.documentElement.getBoundingClientRect().top = -500
// document bottom is 500px closer
document.documentElement.getBoundingClientRect().bottom = 1500当我们滚动到底部时，假设窗口高度为 600px
// document top is above the window 1400px
document.documentElement.getBoundingClientRect().top = -1400
// document bottom is below the window 600px
document.documentElement.getBoundingClientRect().bottom = 600请注意，bottom 不能为 0，因为它永远不会到达窗口顶部。bottom 坐标的最低限制是窗口高度（我们假设为 600），我们不能再向上滚动它。
我们可以通过 document.documentElement.clientHeight 获取窗口高度。
对于我们的任务，我们需要知道文档底部何时距离它不超过 100px（即：600-700px，如果高度为 600）。
所以这是函数
function populate() {
while(true) {
// document bottom
let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// if the user hasn't scrolled far enough (>100px to the end)
if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
// let's add more data
document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
}
}