page_javascript 스킬 하단으로 스크롤바 스크롤 시 컨텐츠를 추가하는 js 코드 자동 로딩

1. 페이지 스크롤 이벤트 등록, window.onscroll = function(){ }

2. 페이지 높이, 스크롤 막대 위치 및 문서 높이를 가져오는 관련 함수:

코드 복사 코드는 다음과 같습니다.

//스크롤 막대의 현재 위치 가져오기
function getScrollTop() {
var scrollTop = 0 ;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop
}

//현재 범위의 높이 가져오기
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 clientHeight; 문서의 전체 높이를 가져옵니다
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}


3 , HTML 페이지 하단에 코드를 추가하세요:

코드 복사

코드는 다음과 같습니다: <script> </a>window.onscroll = function () { </span>if (getScrollTop() getClientHeight() == getScrollHeight()) { </div>alert("바닥에 도달 중"); } <div class="codebody" id="code15357">} <br></script>


이렇게 하면 스크롤 막대가 페이지 하단에 도달하면 경고("최저 도달")가 트리거됩니다. 다음으로 할 일은 트리거된 함수를 ajax 호출로 변경하고 페이지에 콘텐츠를 동적으로 추가하는 것입니다.

4, 페이지 요소를 동적으로 추가하는 샘플 코드:

코드 복사

코드는 다음과 같습니다. var newnode = document.createElement("a"); newnode.setAttribute("href", "#") newnode.innerHTML = "새 항목"; >document.body .appendChild(newnode); var newline = document.createElement("br");

document.body.appendChild(newline);

이 코드를 다음으로 바꾸세요. Alert( "reach the Bottom");, 스크롤 막대를 아래쪽으로 스크롤하면 "새 항목" 줄이 아래로 스크롤하는 것과 달리 페이지 아래쪽에 추가되는 것을 볼 수 있습니다. 끝.

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>//다른 브라우저는 window의 하위 개체를 사용합니다. 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>function onajaxtest(req) { <br>var newnode = document.createElement("a"); <br>newnode.setAttribute("href", "#") <br>newnode.innerHTML = req.readyState " " req.status " " req.responseText; <br>document.body.appendChild(newnode) <br>var newline = document.createElement("br") <br>document.body.appendChild( 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

그런데 여기서 0과 1 두 가지 상태를 출력하지 않았는데요, 합격 전문가들은 왜 그럴까요?