모바일에서 스크롤을 늘릴 때 사용하는 소스
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body>
<!-- label은 모바일에서 작은 것 touch를 쉽게 면적을 넓혀줄 때 많이 사용 -->
<label for="aaa">체크박스</label>
<input type="checkbox" id="aaa" value="aaa">
<script>
//스크롤바 생기게
for(var i=1; i<=20; i++){
document.write("<h1>난 최고의 프로그래머" + i + "</h1>");
}
</script>
<script>
//스크롤바 이동, 크롬 잘 안됨(버그가 있음) - 새로고침하면 스크롤바가 맨 위로 가게
//구글은 자신들의 엔진이 넘 빨라서라고 거꾸로 자랑질
// scrollTo에 잠시 시간을 주면 된다
setTimeout(()=>{
window.scrollTo(0,0);
},20);
//모바일에서 많이 쓰는 스크롤 이벤트
let l_cnt = 1;
var f_scroll = function(){
// 낯설지만 이렇게밖에 안 쓰니까 이 소스는 그냥 가지고 재활용하는 걸로
let l_docElement = document.documentElement; // 실시간 문서정보객체
// let l_scrollTop = document.body.scrollTop; //안됨!
let l_scrollTop = l_docElement.scrollTop; //됨!
//documentElement - 화면에서 실시간으로 변하는 내용을 가지고있다.
let l_clientHeight = l_docElement.clientHeight; // 보이는 화면높이
let l_scrollHeight = l_docElement.scrollHeight; // 문서 전체의 높이
console.log("scrollTop",l_scrollTop);
console.log("clientHeight",l_clientHeight);
console.log("scrollHeight",l_scrollHeight);
if( (l_scrollTop + l_clientHeight) >= (l_scrollHeight - 50) ){
// alert("바닥치기 50px 전!!");
for(var i=1; i<=5; i++){
let l_h1 = document.createElement("h1");
l_h1.innerHTML = "이거슨 추가내용이다 " + (++l_cnt);
document.body.appendChild(l_h1); // body태그에 추가
}
}
}
window.addEventListener("scroll",f_scroll);
</script>
</body>
</html>