jQueryを使用してユーザーがDivの一番下までスクロールしたことを検出するにはどうすればよいですか?

jQuery を使用した Div の一番下へのスクロールの検出

自動オーバーフローを使用して div 内の可変高さのコンテンツを操作する場合、ユーザーが div の一番下に到達するのが難しい場合があります。この記事では、jQuery を使用してこのイベントを検出するソリューションを提供します。

Div ディメンションについて

ユーザーが div の一番下までスクロールしたことを検出するには、次のことを理解することが重要です。 div の寸法に関連付けられたプロパティとメソッド。

• scrollTop(): コンテンツが垂直方向にスクロールされたピクセル数を返します。
• innerHeight(): スクロールバーと境界線を除いた、div の内側の高さを返します。
• scrollHeight: 非表示のコンテンツを含む、div のコンテンツの合計の高さを返します。

一番下のスクロール イベントの検出

次の jQuery コードは、ユーザーが div の一番下に到達したことを検出できます:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

コードの説明

• $(#flux): ID「flux」のdivを選択します。
• on ('scroll'): スクロール イベントを div にバインドします。

• if($(this).scrollTop() $(this).innerHeight() >= $(this)[0].scrollHeight):

  • 現在のスクロール位置と内部の高さの合計がコンテンツの高さの合計以上であるかどうかを確認します。
  • true の場合、この条件は、ユーザーが div の一番下まで、またはそれを超えてスクロールしたことを示します。
• alert('end到達'):コンテンツの終わりに達したときの警告メッセージ。

以上がjQueryを使用してユーザーがDivの一番下までスクロールしたことを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。