滚动加载更多内容示例 初始加载的内容
登入後複製
接下來，在 JavaScript 檔案main.js中實作捲動載入更多內容的功能。
// 获取显示内容的容器元素 const contentContainer = document.getElementById('content'); // 监听滚动事件 contentContainer.addEventListener('scroll', function() { // 判断用户是否滚动到底部 if (contentContainer.scrollTop + contentContainer.clientHeight >= contentContainer.scrollHeight) { // 模拟异步请求加载更多内容 setTimeout(function() { // 创建新的内容元素 const newContent = document.createElement('p'); newContent.textContent = '加载的新内容'; // 将新的内容添加到容器中 contentContainer.appendChild(newContent); }, 1000); // 延时1秒模拟请求 } });
登入後複製
這段程式碼中，首先取得到 在範例中，我們使用 總結： 以上是JavaScript 如何實現網頁滾動到底部自動載入更多內容的功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！容器元素，然後監聽其捲動事件。在捲動事件處理函數中，判斷使用者是否捲動到了底部。當捲動到底部時，模擬非同步請求載入更多內容。在實際應用中，可以根據特定需求使用 AJAX 或其他方式實現非同步請求。
setTimeout函數模擬非同步請求，延時1秒後向容器中新增新的內容元素。可以根據實際情況修改延時時間，或使用真實的非同步請求。
透過 JavaScript 監聽捲動事件，並根據捲動位置實現自動載入更多內容的功能。在實際應用中，可以根據需求自訂特定的載入行為和樣式。這種無限滾動的互動方式可以提升使用者體驗，並且在大量內容需要顯示的情況下，減少頁面載入時間和流量消耗。
