HTML、CSS、jQuery を使用して無限スクロールを実現し、より多くのコンテンツを読み込む方法

 
  
1
 
2
 
3
  
 

次に、リストのスタイルとスクロール読み込み領域の高さを制御するために、いくつかの CSS スタイルを定義する必要があります。

#content { height: 400px; /* 指定滚动加载区域的高度 */ overflow-y: scroll; /* 添加垂直滚动条 */ } ul { padding: 0; list-style: none; } li { height: 50px; line-height: 50px; background-color: #f2f2f2; border-bottom: 1px solid #ccc; text-align: center; }

これで、jQuery コードを追加して、無限スクロール読み込みを実装できます。まず、$(window).scroll()メソッドを使用して、ページのスクロール イベントをリッスンする必要があります。

$(window).scroll(function() { // 获取滚动条距离顶部的距离 var scrollTop = $(this).scrollTop(); // 获取页面的总高度 var scrollHeight = $(document).height(); // 获取窗口的高度 var windowHeight = $(this).height(); // 当滚动条距离底部还有100px时，加载更多内容 if (scrollHeight - scrollTop - windowHeight < 100) { // 调用加载更多内容的函数 loadMoreContent(); } });

上記のコードでは、スクロール バーの下からの距離を計算することで、さらにコンテンツを読み込むイベントをトリガーします。スクロール バーがまだ下から 100 ピクセルにある場合、ユーザーがページの一番下までスクロールしたと見なされ、さらにコンテンツを読み込む機能がトリガーされます。

最後に、さらにコンテンツを読み込むためにloadMoreContent()関数を定義する必要があります。

function loadMoreContent() { // 模拟加载延迟 setTimeout(function() { // 这里可以通过Ajax请求或其他方式来获取新的内容 var newContent = ''; for (var i = 0; i < 10; i++) { newContent += '
' + i + '
'; } // 将新的内容追加到列表中 $('#list').append(newContent); }, 1000); }

loadMoreContent()関数では、Ajax リクエストまたはその他のメソッドを通じて新しいコンテンツを取得できます。ここではデモンストレーションのために、単純なループを使用して新しいコンテンツを生成し、それをリストに追加します。

上記のコードにより、無限スクロール読み込み機能の実装に成功しました。ユーザーがページの一番下までスクロールすると、新しいコンテンツが自動的に読み込まれてリストに表示され、シームレスなブラウジング エクスペリエンスが実現します。

概要:

HTML、CSS、jQueryを組み合わせることで、無限スクロールローディング機能を簡単に実現できます。まず、ページのスケルトン構造と CSS スタイルを設定します。次に、jQuery を使用してスクロール イベントをリッスンし、スクロール位置を決定し、読み込み関数をトリガーします。最後に、Ajax またはその他のメソッドを通じて新しいコンテンツを取得して追加します。ページへ。

無限スクロールの読み込みは、一般的な技術アプリケーションです。これにより、ユーザーは新しいコンテンツを継続的に読み込むことができるため、ユーザーの閲覧効率とユーザー エクスペリエンスが向上します。この記事が同様の機能を実装する際の参考になれば幸いです。

以上がHTML、CSS、jQuery を使用して無限スクロールを実現し、より多くのコンテンツを読み込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。