如何通过JavaScript实现页面滚动到底部时自动添加HTML内容

问题修正点 #

• 高度、滚动距离相关API使用错误：原代码中用到的contain.height、window.height均为无效属性，window.scrollTo是控制滚动的方法而非滚动距离属性，需要替换为正确的DOM属性
• DOM插入逻辑错误：appendChild仅支持传入DOM节点对象，不能直接插入HTML字符串，需改用insertAdjacentHTML方法插入字符串内容
• 缺少防重复触发逻辑：滚动事件触发频率极高，不加限制会导致一次滚动到底部重复添加多组内容
• 底部判断逻辑容错性差：严格相等的判断容易因为浏览器滚动精度问题触发失败，需预留极小的判断阈值

完整可运行代码 #

HTML代码（和你原有代码一致，无需修改）

<div id="contain">
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
   <div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
</div>

CSS代码（和你原有代码一致，无需修改）

.demo{
  padding:20px;
  border:2px solid #222;
  text-align:center;
}

JS代码（替换原有JS即可）

const contain = document.querySelector('#contain');
const demoStr = `<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>`;
// 加载锁，防止重复触发添加逻辑
let isLoading = false;

// 防抖函数，控制滚动事件触发频率
function debounce(func, delay = 200) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

function addDemo() {
  if (isLoading) return;
  // 计算滚动位置：滚动距离 + 视口高度 >= 容器总高度 - 10px阈值
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const viewHeight = window.innerHeight;
  const containHeight = contain.scrollHeight;
  if (scrollTop + viewHeight >= containHeight - 10) {
    isLoading = true;
    // 循环添加5组内容
    for (let i = 0; i < 5; i++) {
      contain.insertAdjacentHTML('beforeend', demoStr);
    }
    // 内容添加完成后解锁
    isLoading = false;
  }
}

window.addEventListener('scroll', debounce(addDemo));

功能说明 #

页面滚动到距离底部10px位置时，会自动往容器末尾插入5组.demo结构，滚动过程中不会重复触发添加逻辑。

内容的提问来源于stack exchange，提问作者AWEI