230. 무한스크롤

무한스크롤

• 스크롤바가 맨 밑에(근처) 닿으면 동작
  scroll_bottom = scrollTop + 모니터 높이
  문서 높이 <= scroll_bottom 하면 요소 추가

if($(document).height() <= scroll_bottom)

요소 삽입

1. append

$('선택자').append('삽입할 코드');

append to

$('삽입할 코드').appendTo('선택자');

append (To) 는 선택한 요소의 마지막 자식으로 들어간다.

• 주의
  css를 같이 명시하는 경우, append 와 appendTo 가 아래와 같이 차이 난다

$('list').appendTo('body').css({color:'red'})
해설 :  red 가 list에 담아놓은 요소에 적용됨


$('body').append('list').css({color:'orange'}) 
해설 : orange 가 body에 적요됨

2. prepend

$('선택자').prepend('삽입할 코드');

prependTo

$('삽입할 코드').prependTo('선택자')

prepend(To)는 선택한 요소의 첫 번째 자식으로 들어간다.

3. 무한스크롤 예제

let d_height = $(document).height();
//(변수 d_height 에 $(document).height(); , 즉 문서의 높이값을 저장시킴) 

    $(window).scroll(function(){ // 윈도우 창에서 스크롤이 되면 
        let s_bot = $(window).scrollTop() + $(window).height();
      // 변수 s_bot에 scrollTop 값 + 모니터 높이를 계싼한 값을 저장한다.
      

        if(s_bot >= d_height) { 
          // s_bot 값이 d_height 값보다 크거나 같을 때
            for(let i=0; i<20; i++) {
                let list = `<h1>비트스터디${i+1}</h1>`; 
                $(list).appendTo('body').css({color:'red'}) 
            }
          // list 를 body 에 20번 넣는다. 색은 red
            

            d_height = $(document).height(); 
          	// 계산된 d_height 값을 다시 저장시킨다.
        }
    });

})