JavaScript 如何实现滚动到页面底部自动加载的内容淡入效果？

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 获取文档内容的高度
  var documentHeight = document.documentElement.scrollHeight;
  // 获取视口的高度
  var windowHeight = window.innerHeight;
  // 获取滚动条的位置
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  // 判断是否滚动到页面底部
  if (scrollTop + windowHeight >= documentHeight) {
    // 加载新内容的函数
    loadContent();
  }
});

function loadContent() {
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求方式和URL
  xhr.open('GET', 'http://example.com/load-more-content', true);
  // 监听请求状态变化事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 请求成功，将新内容插入到页面中
      var newContent = xhr.responseText;
      var container = document.getElementById('content-container');
      container.innerHTML += newContent;

      // 将新内容设置为不可见
      var newElements = container.querySelectorAll('.new');
      for (var i = 0; i < newElements.length; i++) {
        newElements[i].style.opacity = 0;
      }

      // 淡入效果
      fadeIn(newElements);
    }
  };
  // 发送请求
  xhr.send();
}

function fadeIn(elements) {
  // 获取元素的个数
  var count = elements.length;
  // 定义计数器
  var index = 0;

  function animate() {
    // 将元素的透明度逐渐增加
    elements[index].style.opacity = parseFloat(elements[index].style.opacity) + 0.05;
    // 判断是否所有元素都已经淡入完毕
    if (parseFloat(elements[index].style.opacity) >= 1) {
      // 如果还有未淡入的元素，则继续执行淡入动画
      if (index < count - 1) {
        index++;
        animate();
      }
    } else {
      // 利用requestAnimationFrame函数实现平滑动画效果
      window.requestAnimationFrame(animate);
    }
  }

  // 开始执行动画效果
  animate();
}