라이브러리로도 쉽게 구현할 수 있을 것 같아
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>무한 스크롤</title>
</head>
<body id="body">
</body>
<script>
window.addEventListener("load", (e) => {
for (var i = 0; i < 20; i++) {
document.getElementById('body').innerHTML += '<h1>Infinity Scroll</h1>';
}
window.addEventListener("scroll", (e) => {
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var scrollTop = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
var scrollHeight = scrollTop + window.innerHeight;
var documentHeight = document.body.clientHeight;
//alert(scrollHeight)
//alert(documentHeight)
// 스크롤의 높이와 문서의 높이가 같을 때
if (scrollHeight >= documentHeight) {
for (var i = 0; i < 10; i++) {
document.getElementById('body').innerHTML += '<h1>Infinity Scroll</h1>';
}
}
});
});
</script>
</html>
|
cs |
Document.compatMode
Document.compatMode 속성은 문서 렌더링을 호환 모드에서 진행했는지, 표준 모드에서 진행했는지 나타냅니다.
Element.innerHTML
Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.
--------------------------
참고
https://meaningone.tistory.com/316 (inner.HTML 설명이 아주 잘 되어있음)
https://kku-jun.tistory.com/43, https://lakelouise.tistory.com/35 (addEventListener 사용법 및 사용 시 주의 사항)
https://m.blog.naver.com/PostView.nhn?isHttpsRedirect=true&blogId=sgj4958&logNo=222022912143&categoryNo=105&proxyReferer= (자료구조부터 상세히 설명되어있음)
'카카오 클라우드 스쿨' 카테고리의 다른 글
| [node.js] 단방향 암호화 (0) | 2022.11.16 |
|---|---|
| [HTML5] 세션 스토리지 구현해보기~ (0) | 2022.11.15 |
| [HTML5]WEB Storage - Session Storage & Local Storage (0) | 2022.11.15 |
| [GIT] repository에 수정파일 업데이트 하는 방법 (0) | 2022.11.15 |
| [JavaScript] Progress / Memory Leak (메모리 누수) (0) | 2022.11.14 |
