スクロールバーがpage_javascriptスキルの一番下までスクロールしたときにコンテンツを追加するjsコードを自動的にロードします。

1. ページ スクロール イベントを登録します。window.onscroll = function(){ };

2. ページの高さ、スクロール バーの位置、ドキュメントの高さを取得する関連関数:

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

//スクロール バーの現在位置を取得します
function getScrollTop() {
varscrollTop = 0 ;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
else if (document.body) {
scrollTop = document.body.scrollTop;
}
returnscrollTop;

//現在の範囲の高さを取得します
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); }
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return
}

//ドキュメントの完全な高さを取得します
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}


3 、HTML ページの下部にコードを追加します:

コードをコピー コードは次のとおりです: <script> </div>window.onscroll = function () { <div class="codebody" id="code15357">if (getScrollTop() getClientHeight() == getScrollHeight()) { <br>alert("底に到達中"); } <br>} <br></script>


このようにすると、スクロール バーがページの下部に到達すると、alert("bottom到達") がトリガーされます。次に行うことは、トリガーされた関数を ajax 呼び出しに変更し、ページにコンテンツを動的に追加することです。

4、ページ要素を動的に追加するサンプル コード:

コードをコピーします

コードは次のとおりです: var newnode = document.createElement("a"); newnode.innerHTML = "新しい項目"; >document.body .appendChild(newnode);

var newline = document.createElement("br");

このコードを次のように置き換えますalert( "一番下に到達"); とすると、スクロールバーが一番下までスクロールすると、ページの一番下に「新しい項目」の行が追加され、下にスクロールするのとは異なり、そのまま増え続けていくことがわかります。終わり。

5、サンプル コードを ajax 関連コードに変更します。

コードをコピーします


コードは次のとおりです。

<script> <u>window.onscroll = function () { </u>if (getScrollTop() getClientHeight() == getScrollHeight()) { </a>var xmlHttpReq = null; </span>/ /IE ブラウザは ActiveX を使用します </div>if (window.ActiveXObject) { <div class="codebody" id="code32851">xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP") <br>} <br>//他のブラウザはウィンドウのサブオブジェクトを使用しますXMLHttpRequest <br>else if (window.XMLHttpRequest) { <br>xmlHttpReq = new XMLHttpRequest(); <br>} <br><br>if (xmlHttpReq != null) { <br>//リクエストを設定します (not実際に開かれた) 、 true: 非同期を示します <br>xmlHttpReq.open("GET", "/ajaxtest", true); <br>//リクエストのステータスが変化するとコールバックが呼び出され、渡されます。パラメータ xmlHttpReq <br>xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq) }; <br>//リクエストを送信<br>xmlHttpReq.send(null); <br>} <br><br>function onajaxtest(req) { <br>var newnode = document.createElement("a"); <br>newnode.setAttribute("href", "#"); req.readyState " " req.status " " req.responseText; <br>document.body.appendChild(newnode); <br>var newline = document.createElement("br"); newline); <br>} <br></script>


スクロール バーがページの一番下に達すると、次のようにノードが追加されます。 >2 200
3 200 ajax ok
4 200 ajax ok

ここで、2、3、および 4 はリクエストのステータス readyState、200 は http 応答ステータスのステータス、ajax ok は返されるテキストです/ajaxtext アプリケーションによる詳細については、以下の参考資料をご確認ください。


XMLHttpRequest ドキュメントによると、次のように出力できるはずです:

0 200

1 200

2 200

3 200 ajax ok

4 200 ajax ok

しかし、ここで 2 つのステータス 0 と 1 が出力されなかったのはなぜでしょうか。