jQueryを使用してスクロール可能なDivのスクロールの終わりを検出するにはどうすればよいですか?

jQuery を使用したスクロール可能な Div のスクロールの終わりの検出

動的コンテンツを操作する場合、次のようにさらにコンテンツをロードする必要が生じる場合があります。ユーザーはコンテナ要素の一番下までスクロールします。 jQuery は、スクロールが有効な div に対してこのイベントを検出する便利な方法を提供します。

ユーザーが div の下部にいつ到達したかを判断するには、要素のscrollTop と innerHeight の合計をそのscrollHeightと比較できます。

<code class="javascript">if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
  // End of scroll reached
}</code>

コードの実装:

<code class="javascript">jQuery(function($) {
  $('#flux').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      alert('End of div reached');
    }
  })
});</code>

説明:

• scrollTop は、ピクセル数を返します。要素は垂直方向にスクロールされました。
• innerHeight は、スクロールバーを除いた要素の内部の高さを取得します。
• scrollWidth は、ビューポートの外側の領域を含む、要素のコンテンツの合計の高さを表します。

scrollTop と innerHeight の合計がscrollHeightと等しい場合、ユーザーが div の一番下までスクロールしたことを示します。

補足:

jQuery の以前のバージョンでは、bind() を使用してイベント ハンドラーをアタッチしていました。ただし、ドキュメントによると、jQuery 1.7 では on() が推奨されるメソッドです。

以上がjQueryを使用してスクロール可能なDivのスクロールの終わりを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。