디자인 패턴으로서의 무한 스크롤
IntersectionObserver
콜백 기능으로 쉽게 시작할 수 있습니다.실제 예제로 독자가 원본 기사의 끝에 도달하면 다른 기사를 자동으로 가져오는 블로그 사이트에서 사용할 구성 요소를 만들 수 있습니다.
코드는 다음과 같습니다.
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting == true) {
fetchNextArticle();
}
}, {threshold: 0});
const bottomOfPage = document.querySelect('#bottom-of-page');
observer.observe(bottomOfPage);
별로 없습니다.
bottom-of-page
요소는 모든 HTML 요소가 될 수 있지만 가장 단순한 형태에서는 원본 기사의 내용 뒤 어딘가에 있는 0이 아닌 차원을 가진 clear div
입니다.관찰자는 독자가 대상
div
이 보이는 지점으로 스크롤할 때 호출됩니다. threshold
의 0
값은 div
의 일부가 뷰포트에 있을 때 콜백을 트리거합니다. threshold
의 1
값은 div
모두가 뷰포트에 있을 때만 트리거합니다.fetchNextArticle
함수는 Just-In-Time 로드가 발생하는 곳입니다.const articleUrls = [
'/feb-28-2021.html',
'/feb-21-2021.html',
'/feb-14-2021.html',
'/feb-07-2021.html'
];
const nextIndex = 0;
async fetchNextArticle() {
// fetch the article using HTTP
const response = await fetch(articleUrls[nextIndex++]);
if (response.status != 200 && response.status != 304)
return;
const templateText = await response.text();
// get the <body> of the article's HTML
const template = document.createElement('template');
template.innerHTML = templateText;
const body = template.content.querySelector('body');
// create a new <article> and insert it
const nextArticle = document.createElement('article')
nextArticle.innerHTML = body.innerHTML;
bottomOfPage.parentNode.insertBefore(nextArticle, bottomOfPage);
}
이 예에는 Just-In-Time 로드를 위해 대기 중인 4개의 기사가 있습니다. 물론 실제로 그 대기열은 독자의 관심사에 맞게 동적으로 구축되어야 합니다.
이 기본적인 예는 좋은 출발점이지만 숙련된 개발자는 개선 사항을 쉽게 상상할 수 있습니다.
이 모든 것이 rwt-piqueme DOM 구성 요소에서 구현되었으며 NPM 을 통해 바로 사용할 수 있습니다.
(이 기사의 확장 버전은 원래 Medium 에 게재되었습니다.)
Reference
이 문제에 관하여(디자인 패턴으로서의 무한 스크롤), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/joehonton/infinite-scroll-as-a-design-pattern-379텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)