무한스크롤 구현화면

무한스크롤 보기
위 링크에서 구현된 화면 확인이 가능합니다 😀

JQuery로 구현하기

let count= 0;

$(window).scroll(function() {
  if(count<=24){
     if ( 300 > $(document).height() - $(window).height() - $(window).scrollTop()) {
       for(let n=1;n<7;n++){
         console.log(++count);
         $("#scroll").append('<div class="store-box-wrap"><div class="store-box"><div class="store-box-img"><a href="store-more.html"><img src="img/hot-01.jpg" alt=""></a></div><div class="store-box-info"><p class="store-box-name">사랑꽃집</p><p class="store-box-tit"><a href="store-more.html">프리미엄 조화 나무 아레카야자</a></p><p class="store-box-price"><span class="price-percent">32%</span>25,400</p></div> <!-- store-box-info --></div> <!-- store-box --></div>');
       }
    }
  }
});

scrollTop() 은 마우스 휠을 위 아래로 내린만큼의 값을 뱉어내고
$(document).height() - $(window).height() 은 해당 문서의 높이에서 윈도우의 높이를 뺀 값 을 나타낸다.

이 코드를 짤 당시엔 서버에서 데이터를 불러와 작업하지 않아 일단 형식적으로 이렇게 구현된다!! 를 보여주기 위해 count를 24개이거나 그 이하일 때에만 출력하게 작성해준 것…
무한 스크롤 하려면 저 값은 빼야한다!!

그리고 스크롤이 바닥 끝까지 닿고나서 갱신하는 것보단.. 스크롤이 얼마 안남았을 때 갱신해주고 싶어
300 > $(document).height() - $(window).height() - $(window).scrollTop() 를 넣어주었다 😀

Java Script 로 구현하기

   let count = 0;

   window.addeventlistener("scroll", function(){
      if( (window.innerHeight + window.scrollY) >= document.body.offsetHeight ){
         setTimeout(function(){
				for(let n=1; n<7; n++){
					const addContent = document.createElement("div");
					addContent.classList.add("store-box-wrap")
					addContent.innerHTML = `<div class="store-box">
					<div class="store-box-img"><img src="img/hot-01.jpg" alt=""></div>
					<div class="store-box-info">
					<p class="store-box-name">사랑꽃집</p>
					<p class="store-box-tit">프리미엄 조화 나무 아레카야자</p>
					<p class="store-box-price"><span class="price-percent">32%</span>25,400</p>
					</div> <!-- store-box-info -->
					</div> <!-- store-box -->`
					document.querySelector('#scroll').appendChild(addContent);
				}
			}, 1000)  
      }
   });

자바스크립트로 구현한 무한스크롤