스크롤이 화면의 끝에 닿기전에 콘텐츠를 추가로 노출시켜 계속 스크롤하게 만드것이 무한스크롤 UI입니다.
보통은 ajax와 같은 서버통신 API를 사용해서 추가로 노출되는 콘텐츠를 로드하지만 본 예제에서는 특정 콘텐츠를 변수에 담고 있다가 데이터가 추가되는 시점에 노출시키는 방식으로 표현해볼 생각입니다.
모바일에서만 국한된 내용으로 오해할 수 있지만 점점 PC웹과 모바일웹의 경계가 모호해지고 있어 PC웹에서도 유용하게 사용 가능합니다.
✨ createDocumentFragment() 메소드
template를 만들어서 뿌리는 과장에서 createDocumentFragment메소드를 사용했습니다.
해당 메소드에 관해서 약간의 설명을 하자면 자바스크립트의 DOM 객체는 연산을 수행할 때마다 DOM tree라는 것으로접근해야 하기 때문에자바스크립트의 성능을 저하시키는 주된요인 중 하나입니다.
따라서, 자바스크립트의 성능을 최적화하기 위해서는 DOM 객체 직접 접근을 최소화하도록 코드를 작성해야 합니다.
최신 브라우저의 경우에는 리플로우(reflow)가 발생하지 않도록 엔진을 최적화하기 때문에 DocumentFragment 객체를 사용할 때 발생하는 성능 향상을 체감하기 어려울 수도 있습니다. 그러나 막대한 크기의 DOM 객체에 대한 다수의 접근을필요로하는 작업을 수행해야하는상황에서 DocumentFragment 객체를 이용한다면, 만족할만한 성능 향상을 기대할 수 있을 것입니다.
✍️ 무한스크롤 (Infinity Scroll) UI 코드
<section>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<div class="block">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
</p>
</div>
<!-- 반복 -->
</section>
<script>
(function() {
const article = document.querySelector('section');
let count = article.children.length;
const template = function(n) {
const docFrag = document.createDocumentFragment();
const div = document.createElement('div');
const p = document.createElement('p');
p.textContent = n+' Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam';
div.appendChild(p)
div.classList.add('block');
docFrag.appendChild(div);
article.appendChild(docFrag);
};
//스크롤 바닥 감지
window.onscroll = function(e) {
//window height + window scrollY 값이 document height보다 클 경우
if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
count++;
template(count); //콘텐츠 추가
}
};
})();
</script>
