まず、需要
ドロップダウンより多くのデータをロードするために、最終的に終わりを動かします。ウェブの実行はシングルスレッドなので、中にJS実施の過程、ページがブロックされて表示されます。場合そのため、JSデータ処理が大きすぎ、複雑なプロセスである、それはカトンのページを引き起こす可能性があります。手動でより多くのコンテンツを見るために、次のページをクリックするようユーザーに要求し、従来のデータは、フォームのすべてのページを表示するには、その効果は良いページングではありません。そのウィンドウが自動的に次のセクションをロードするページコンテンツの下部に達し、多くのサイトは、無制限のページング・モードを使用しています。
第二に、概念
clientHeight：ビューポート（ビューポート）の高さは、我々はブラウザ内のコンテンツの高さを見ることができるということです。
screenHeight：画面の高さ、画面の高さ、実際のモバイルデバイス。
scrollHeight：非常にリアルな内容。
scrollTopスプライトは：一部上記のウィンドウを非表示にします。
第三に、原則
実際のコンテンツの高さ - 高さの窓 - トリガ条件がロードされたとして、20 <の高さの上に隠されました
第四に、実装
1、離れて文書の先頭にスクロールバーへのアクセス
VAR scrollTopスプライト= document.documentElement.scrollTop。
// 或
VAR scrollTopスプライト= Math.ceil（$（この）.scrollTop（））;
図2に示すように、可視領域を取得する高さ
1 VAR v_height = document.documentElement.clientHeight。
2 // 或
3 VAR v_height = $（この）.height（）;
3、文書を取得の高さの合計
1 VAR d_height = document.body.scrollHeight。
2 // 或
3 VAR d_height = $（文書）.height（）;
4、スクロールイベントリスナーを追加
1 $（ウィンドウ）.scroll（関数（）{}）;
図5に示すように、実際のコンテンツの高 - 高さの窓 - トリガ条件がロードされたように、20 <の高さより上に隠さ
1 $（関数（）{
2 のgetData（）;
3 $（ウィンドウ）.scroll（関数（）{
4 VAR scrollTopスプライト= Math.ceil（$（この）.scrollTop（））;
5 VAR v_height = $（この） .height（）;
6 VAR d_height = $（文書）.height（）;
7 であれば（d_height - v_height - scrollTopスプライト<20 ）{
8 showLoading（）;
9 のgetData（）;
10 hideLoading（）;
11 }
12 }）
13 }）
共通トリガ要求を分析V.
1 function condition(){
2 var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
3 var viewportHeight = window.innerHeight ||
4 document.documentElement.clientHeight ||
5 document.body.clientHeight || 0;
6 var scrollHeight = window.pageYOffset ||
7 document.documentElement.scrollTop ||
8 document.body.scrollTop || 0;
9 return pageHeight - viewportHeight - scrollHeight < 20;
10 }