IntersectionObserver API를 사용한 기본 무한 스크롤

교차 관찰자 API : DOM 요소 가시성을 효율적으로 모니터링합니다

교차로 관찰자 API는 지정된 DOM 요소의 가시성을 효율적으로 모니터링하기위한 새로운 클라이언트 측 JavaScript API로, 게으른로드, 무한 스크롤 및 광고 가시성과 같은 기능에 유용합니다. 브라우저 지원 및 폴리 필

이 API는 비교적 새롭고 현재 Chrome Desktop Edition 51, Chrome Android Edition 51, Android Webview 51, Opera 38 및 Opera Android Edition을 포함하여 브라우저 지원이 제한되어 있습니다. 그러나 개발중인 폴리 필이 GitHub에 제공되므로 개발자는 교차로 관찰자를 즉시 ​​사용할 수 있습니다.

Infinite Scrolling 구현 안내서

이 기사는 Page 설정, 스크립트 작성 및 Sentinel 요소 관리를 포함하여 무제한 스크롤 사용자 경험 모드를 달성하기 위해 교차점을 사용하는 방법에 대한 자세한 설명을 제공합니다. 이 안내서에는 약속, 템플릿 문자열 및 화살표 기능과 같은 ES6/ES2015 기능이 포함되어 있습니다. 핵심 개념 : Sentinel 요소

Infinite Scrolling의 구현에 대한 핵심 아이디어는 목록 하단의 요소를 "Sentinel"으로 사용하는 것입니다. 브라우저 창이 페이지 하단에 접근 할 때 더 많은 컨텐츠를로드 할 수 있습니다.

페이지 설정 (html) 페이지 바디 구조는 간단한 목록입니다 코드를 단순화하기 위해 초기 목록 항목과 후속 페이지는 JavaScript를 통해 동적으로로드됩니다. API가 지원하지 않는 경우 Polyfill을 포함하고 프롬프트 메시지를 표시합니다.

CSS 스타일은 목록 뷰 레이아웃을 설정하고 프롬프트 스타일을 지원하는 데 사용됩니다 (자세한 내용은 스타일 시트 참조).

스크립트 생성 (javaScript)

먼저, a 객체를 인스턴스화합니다 는 요소가 창에 완전히있을 때만 이벤트 리스너가 트리거되는 것을 의미합니다. 센티넬 요소에는 시연 중에 주황색 경계가 표시됩니다.

이벤트 리스너는 현재 센티넬 제거, 목록 하단에로드 표시기를 설정하고

메소드를 사용하여 다음 페이지를로드하는 것과 같은 작업을 수행합니다.

메소드는 이러한 작업이 완료된시기를 나타내는 약속을 반환합니다. 그런 다음 새 센티넬 요소를 선택하고로드 표시기를 끄십시오. 메소드 새 센티넬을 선택하고 새로로드 된 페이지의 첫 번째 요소를 선택하십시오 : 나머지 코드는 주로

함수를 구현합니다. (시뮬레이션 네트워크 요청)에 의해 반환 된 약속이 해결되면 제공된 프로젝트 개체가 HTML로 렌더링되어 목록의 끝에 추가됩니다.

추가 읽기

<ul class="listview"></ul>

API 및 그 원칙에 대한 더 많은 문서 : <🎜 🎜>

intersectionObserver가 <🎜 🎜>를 볼 수 있습니다 교차 관찰자들은

<div class="polyfill-notice">The polyfill is in use</div>
<🎜>

를 설명했다 mdn - IntersectionObserver api 교차로 관찰자 API FAQ

(원본 텍스트에는 완전하고 명확한 답변이 포함되어 있기 때문에 FAQ 섹션은 여기에서 생략됩니다.)

위 내용은 IntersectionObserver API를 사용한 기본 무한 스크롤의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!