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(); }