Intersection Observer API
-
[JavaScript] SpringBoot : 무한 스크롤(Intersection Observer API)카테고리 없음 2023. 7. 28. 22:24
목적 스크롤을 내리면 새로 게시물 리스트를 불러와 생성하는 기능 구현 무한 스크롤 기능 구현 보통 인스타그램이나 페이스북 같은 SNS 피드를 보면 화면을 아래로 계속 스크롤 해도 새로운 게시물이 무한하게 나오는 것을 볼 수 있다. 이번 프로젝트에서도 이와 같은 기능을 구현하고자 했는데, 그 과정을 살펴보자. 우선 크게 흐름을 설명하면 이렇다. 리스트 게시판에서 스크롤을 아래로 내려서 가장 하위에 위치한 요소가 감지됨. Ajax로 아래 이어 붙일 페이지에 대한 정보 서버에 요청 서버는 DB에 저장되어 있는 게시물을 가져와서 Ajax에 응답 응답 받은 데이터를 가지고 동적으로 요소 생성 위 과정의 결과는 아래와 같다. 오른쪽에 스크롤 길이를 보면 내려갈 때 계속해서 아래쪽에 새 게시물이 생성되는 것을 볼 수..