Ajax로 구현하는 무한스크롤

자바스크립트 방식 Ajax에 무한스크롤을 구현해본다

 

    let lastpage = false; //마지막 페이지 설정
    let oneTime = false; //한번만 실행을 보장하는 변수
    let first = true; //맨처음 접속시 실행됨을 보장하는 변수


classScroll();

function classScroll(){
    const screenHeight = screen.height;/* 화면크기 */
            
    if(first&& !oneTime){
    oneTime = true; 
    first =false; 
    addClassLine();//컨텐츠 추가 발동
    }//맨처음 실행   
    
    document.addEventListener('scroll',OnScroll,{passive:true}) // 스크롤 이벤트함수정의
    
    function OnScroll () { //스크롤 이벤트 함수
            
            const fullHeight = infinitebox.clientHeight; // infinite 클래스의 높이   , 스크롤 이벤트 안에서 정의해야 추가된 높이가 다시 계산된다
            const scrollPosition = scrollY; // 스크롤 위치
                    if (fullHeight-screenHeight*1/4 <= scrollPosition && !oneTime && !lastpage && !first) {
                        oneTime = true; // oneTime 변수를 true로 변경해주고,
                        addClassLine();//컨텐츠 추가 발동
                    }
    }
}

function addClassLine(){
	//ajax를 통한 데이터 추가
    
}//컨텐츠 추가 발동