Javascript:무한 스크롤링

틀:Javascript

Javascript:개요
Javascript:변수, 상수
1. Javascript:자료구조
Javascript:연산자
분기문
1. Javascript:조건문
2. Javascript:반복문
Javascript:선택자
1. Javascript:요소 내용 변경
2. Javascript:HTML로부터 데이터 받기
Javascript:이벤트
1. Javascript:클릭 이벤트
Javascript:AJAX
1. AJAX 활용
  1. Javascript:댓글달기
  2. Javascript:무한 스크롤링
Javascript:활용
1. Javascript:표 정렬

개요[편집 | 원본 편집]

페이스북 등에서 주로 이용되는 전략. 스크롤링 하여 아랫바닥에 닿으면 새로운 컨텐츠를 추가하여 넣는다.

스크롤 이벤트를 이용한다.

과정

설명

방법

Html

html 안의 input 태그에 페이지 수를 기입한다.

여기에서 페이지 카운팅을 한다.

<input type="hidden" id='page' value='0'>

JS

자바스크립트로 스크롤이벤트를 이용한다.

calMore(pageValue){  // 다음 페이지의 내용을 불러오는 함수.
    $.ajax({
        type:'post',
        url:'...',
        data:'pageValue'
    })
}


if(scrollHeight >= documentHeight){
    let pager = document.querySelector('#page');
    let pageValue = document.querySelector('#page').value;  // pager에서 value값을 실시간으로 갱신하지 못하고 처음 값만 가져와서 따로 정의해준다.
    pager.value = parseInt(pagevalue)+1;  // 현재 페이지값에 1을 더해 태그에 반영한다.
    if(pageValue>10){
        return;  // 10페이지가 넘어가면 멈추게 한다.
        }
    callMore (pagevalue);
}

Javascript:무한 스크롤링

개요[편집 | 원본 편집]

둘러보기 메뉴

검색