スクロールバーがページの一番下までスクロールしたかどうかを判断し、event_javascript スキルを実行する JS メソッド

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

上と同じ。

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

コードをコピーします コードは次のとおりです:

スクロールボトムテスト =function(){
$("#contain").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可視高さ
contentH =$(this).get(0).scrollHeight,//コンテンツの高さ
scrollTop =$(this).scrollTop();//スクロールの高さ
//if(contentH - viewH -scrollTop
If(scrollTop/(contentH -viewH)>=0.95){ //下位 100 ピクセルに到達したら、新しいコンテンツを読み込みます
// ここにデータをロードします..
}
});
}