jquery がスクロール バーがページの一番下までスクロールしたことをどのように判断し、event_jquery を実行するかを簡単に分析します。

この記事では、jquery がスクロール バーがページの下部に達したことを判断し、イベントを実行する方法をプログラマに紹介します。まず、3 つの dom 要素、つまり clientHeight、offsetHeight、scrollTop を理解します。

まず、3 つの dom 要素、つまり clientHeight、offsetHeight、scrollTop を理解します。

clientHeight: この要素の高さはスペース全体の高さを占めます。したがって、div にスクロール バーがある場合、高さはスクロール バーを含まず、以下の内容は表示されません。ちょうどDIVの高さです。

offsetHeight: は要素コンテンツの高さを指します。上記によると、この高さは、スクロールバーの下の表示部分と非表示部分を含む、DIV 内の高さになります。

スクロールトップ: これは何ですか?スクロールバーがスクロールできる長さとして理解できます。

たとえば、DIV の高さが 400 ピクセル (つまり、clientHeight が 400) で、内部のコンテンツが長いリストの場合、コンテンツの高さは 1000 ピクセル (つまり、offsetHeight は 1000) になります。つまり、表示部分には 400 ピクセルが表示されますが、1000 ピクセルのコンテンツにはまだ 600 ピクセルの非表示部分が存在します。この見えない部分は、スクロールバーを引くことで表示することができます。スクロールバーを引いていない場合、このときのscrollTopは0です。スクロールバーを一番下まで引いてリストの一番下の部分を表示すると、scrollTopは600になります。したがって、scrollTop の値の範囲は [0, 600] です。したがって、この 600 は、スクロール バーがスクロールできる長さと理解できます。

上記の概念を理解した上で。最下部までスクロールするかどうかを判断するのは簡単です。

まず、スクロールバーを上から下に引っ張ります。変化するのはscrollTopの値であり、この値には範囲があります。
この間隔は次のとおりです: [0, (offsetHeight - clientHeight)]
つまり、スクロールバーを引くプロセス全体の変化は、0 ～ (offsetHeight – clientHeight) の範囲内になります。

1. スクロール バーが一番下までスクロールしたかどうかを確認します。scrollTop == (offsetHeight – clientHeight)
2. スクロールバーの下から 50px 以内: (offsetHeight – clientHeight) –scrollTop 3. スクロール バーの下部の 5% 以内:scrollTop / (offsetHeight – clientHeight) >= 0.95

上と同じ。
一番下まで引っ張ってコンテンツを自動的にロードしたい場合。スクロールバーイベントを登録するだけです:

scrollBottomTest =function(){
   $("#contain").scroll(function(){
     var $this =$(this),
     viewH =$(this).height(),//可见高度
     contentH =$(this).get(0).scrollHeight,//内容高度
     scrollTop =$(this).scrollTop();//滚动高度
    //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
    if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
    // 这里加载数据..
    }
   });
}

上記の記事は、jquery がスクロール バーがページの一番下までスクロールしたことをどのように判断してイベントを実行するかを簡単に分析しています。これがエディターによって共有されたすべての内容であり、参考になれば幸いです。 Script Home をさらにサポートします。