编写一个返回 true 的程序，判断页面底部是否可见

当页面滚动时，我们经常需要确定是否已经滚动到页面底部。那么如何编写一个程序来判断页面底部是否可见呢？在本文中，我们将介绍两种方法。

方法一：使用可视高度和滚动高度来判断

页面的可视高度是指浏览器窗口可见区域的高度，而滚动高度是指当前已经滚动的距离。我们可以通过对这两个值进行比较，来判断是否已经滚动到页面底部。

function isPageBottomVisible() {
  return (
    window.innerHeight + window.scrollY >=
    document.body.offsetHeight
  );
}

上面的代码中，我们首先使用 window.innerHeight 取得可视高度，然后使用 window.scrollY 取得滚动高度，将它们相加并和页面的总高度进行比较。如果它们的和大于或等于页面的总高度，则说明页面已经滚动到了底部，此时函数将返回 true。

方法二：使用 IntersectionObserver 观察页面底部元素

另一种方法是使用 IntersectionObserver API 来观察页面底部元素是否可见。IntersectionObserver 可以监测目标元素与其祖先元素或顶级文档视窗之间的交集情况。

function isPageBottomVisible() {
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0,
  };

  const observer = new IntersectionObserver(
    ([entry]) => {
      return entry.isIntersecting || entry.intersectionRatio > 0;
    },
    options
  );

  const target = document.querySelector('footer');
  observer.observe(target);
}

上述代码中，我们首先定义了一个 IntersectionObserver 对象，并将其观察的目标元素设置为文档底部的 footer 元素。在回调函数中，我们返回 isIntersecting 属性或 intersectionRatio 属性是否大于 0 来判断目标元素是否可见。如果返回 true，则说明页面已经滚动到了底部，此时函数将返回 true。

总结：以上是两种判断页面底部是否可见的方法，根据实际情况选择适合的方法即可。