html 滚动到底部加载更多

要实现页面滚动到底部自动加载更多内容，可以使用 JavaScript 监听滚动事件，当滚动到底部时触发加载更多的操作。具体的实现步骤如下：

使用 JavaScript 监听页面滚动事件，判断滚动条距离页面底部的距离是否小于等于页面可视区域的高度，如果是，则认为页面已经滚动到底部。

window.addEventListener('scroll', function() {
    var scrollHeight = document.body.scrollHeight;
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
    if (scrollHeight - scrollTop - clientHeight <= 0) {
        // 滚动到底部
    }
});

在滚动到底部时触发加载更多的操作，可以通过 Ajax 发起请求获取更多数据，并将数据显示在页面上。

function loadMore() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'url', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 处理获取到的数据
        }
    };
    xhr.send();
}

将加载更多的操作绑定到滚动事件上，当滚动到底部时自动触发加载更多。

var isLoading = false;
window.addEventListener('scroll', function() {
    var scrollHeight = document.body.scrollHeight;
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
    if (scrollHeight - scrollTop - clientHeight <= 0 && !isLoading) {
        isLoading = true;
        loadMore();
    }
});

在实现过程中，需要注意以下几点：

加载更多的操作需要进行 debouncing 或者 throttling，避免用户快速滚动页面时频繁触发加载操作。
加载完成后需要修改 isLoading 标志位，避免用户滚动到底部时重复触发加载操作。
在加载过程中需要显示加载状态，避免用户无法得知加载是否正在进行。