js 页面滚动到底部

// 当页面滚动到底部时触发的函数
function handleScroll() {
    // 获取文档的高度
    const docHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
    );

    // 获取视口的高度
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

    // 获取当前页面滚动的距离
    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

    // 判断是否滚动到底部
    if (scrollPosition + viewportHeight >= docHeight) {
        console.log("已经滚动到底部");
        // 在这里可以添加滚动到底部后的操作，例如加载更多内容
    }
}

// 监听页面滚动事件
window.addEventListener('scroll', handleScroll);

解释说明：

1. 获取文档高度：通过 Math.max 方法获取文档的实际高度，确保兼容不同浏览器。
2. 获取视口高度：使用 window.innerHeight 或 document.documentElement.clientHeight 获取当前窗口的可见高度。
3. 获取滚动位置：使用 window.pageYOffset 或 document.documentElement.scrollTop 获取当前页面滚动的距离。
4. 判断是否滚动到底部：通过比较滚动位置加上视口高度与文档总高度，判断是否滚动到底部。
5. 监听滚动事件：使用 window.addEventListener('scroll', handleScroll) 监听页面滚动事件，并在滚动到底部时执行相应操作。