<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--모바일이 나오면서 페이지 나누기의 효과가 희미해짐! 손가락 터치-->
<script>
    for(let i = 1; i<=30; i++) {
        document.write("<h1>지완이는 오타왕!</h1>");
    }

    // 크롬의 문제!  window.scrollTo(x좌표, y좌표) settimeout으로 딜레이 줘야 먹음
    setTimeout(function(){
        window.scrollTo(0, 0);
    }, 50)

    
// 스크롤 이벤트
window.onscroll = function(){
    let scrollTop = document.documentElement.scrollTop; // 얼마큼 올라갔냐?
    let clientHeight = document.documentElement.clientHeight; // 브라우저에서 사용자가 눈으로 보는 크기
    let scrollHeight = document.documentElement.scrollHeight; // 문서전체 크기(높이)

    // 스크롤바를 끝까지 내렸다면 ( 브라우져가 좋아져서 소숫점 때문에 미세한 오차 발생!)
    // scrollTop + clientHeight = scrollHeight 가 되어야 함
    // 실제는 약간의 튜닝값을 넣어서 끝까지 내리기 이전에 필요한 처리를 함
    const tunningVal = 50; // 50px 전에 발생시키려 함
    if((scrollTop + clientHeight) >= (scrollHeight - tunningVal)) {
        // alert("스크롤바 끝까지 내렸어요");
        // 실제로 여기에 오는 건 대부분 AJAX
        for(let i=1; i<=8; i++) {
            var h1 = document.createElement("h1");
            h1.innerHTML = "지완이는 안 오타왕" + i;
            document.body.appendChild(h1);
        }
    }
}
</script>
</body>
</html>

DIV 안에 스크롤하기 (테이블 헤더 고정)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #disp{
            border :1px solid black;
            height : 400px;
            overflow : auto;
        }
        th{
            background-color: blue;
            position: sticky;
            top: 0px;
        }
    </style>
</head>
<body>
    <div><h1>DOM(Document Object Model</h1></div>
    <div id="disp">
    <script>
        var tblStr = "<table border=1 style='background-color: lightgreen;'>";
        tblStr += "<tbody id='tbody'>";
        tblStr += "<tr><th>이름</th><th>성격</th></tr>";
        for(let i = 1; i<=20; i++) {
            tblStr += "<tr>";
            tblStr += `<td>미나</td><td>부끄러워${i}</td>`
            tblStr += "</tr>"
        }
        tblStr += "</tbody></table>";
        document.write(tblStr);
    </script>
    </div>
<script>
    const myDisp = document.querySelector("#disp");
    const myBody = document.querySelector("#tbody");    

    function fchk(){
        var scrollTop = myDisp.scrollTop;
        var clientHeight = myDisp.clientHeight;
        var scrollHeight = myDisp.scrollHeight;

        var tunninVal = 50;
        if((scrollTop + clientHeight) >= (scrollHeight - tunninVal)){
            for(let i=1; i<=15; i++){
                let tr = document.createElement("tr");
                tr.innerHTML = `<td>미나${i}</td><td>밥먹어${i+1}</td>`
                myBody.appendChild(tr);
            }
        }
    }
    myDisp.addEventListener("scroll", fchk);
</script>
</body>
</html>