滚动加载更多内容示例 初始加载的内容
次に、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 を使用して、Web ページの下部までスクロールするときにさらにコンテンツを自動的に読み込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。setTimeout
関数を使用して非同期リクエストをシミュレートし、1 秒の遅延後に新しいコンテンツ要素をコンテナに追加します。遅延時間は実際の状況に応じて変更することも、実際の非同期リクエストを使用することもできます。
JavaScript を通じてスクロール イベントを監視し、スクロール位置に基づいてより多くのコンテンツを自動的に読み込む機能を実装します。実際のアプリケーションでは、特定の読み込み動作とスタイルをニーズに応じてカスタマイズできます。この無限スクロール インタラクション方法により、ユーザー エクスペリエンスが向上し、大量のコンテンツを表示する必要がある場合のページの読み込み時間とトラフィック消費が削減されます。