js下拉加载页面

// HTML结构
<div id="content">
  <!-- 初始内容 -->
</div>
<div id="loader">加载中...</div>

// JavaScript代码
document.addEventListener("DOMContentLoaded", function() {
  const options = {
    root: null, // 默认是视口
    rootMargin: '0px',
    threshold: 1.0 // 当目标元素完全进入视口时触发
  };

  const observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadMoreContent();
      }
    });
  }, options);

  const loader = document.getElementById('loader');
  observer.observe(loader);

  function loadMoreContent() {
    // 模拟加载更多内容
    setTimeout(() => {
      const content = document.getElementById('content');
      for (let i = 0; i < 10; i++) {
        const div = document.createElement('div');
        div.textContent = '新内容';
        content.appendChild(div);
      }
    }, 1000);
  }
});