레니스로 무한 스크롤 루프 구축하기

이 포트폴리오에서 가장 만족스러운 상호작용 중 하나는 하단에 도달하면 페이지가 다시 상단으로 원활하게 루프되는 무한 스크롤입니다. 제가 만든 방법은 다음과 같습니다.

문제

기존의 무한 스크롤은 하단에 새로운 콘텐츠를 추가합니다. 하지만 저는 사용자가 눈치채지 못하게 스크롤 위치가 초기화되는 심리스 루프라는 다른 방식을 원했습니다.

레니스의 지원 방법

Lenis는 간단한 API로 버터처럼 부드러운 스크롤을 제공합니다:

'''타입스크립트
const lenis = new Lenis({
무한: true, // 이것이 핵심입니다!
});

무한` 옵션은 레니스가 스크롤 위치를 래핑하도록 지시합니다. 하지만 마법은 DOM을 설정하는 방식에서 일어납니다.

## 브리지 섹션 기법

비결은 하단의 첫 번째 콘텐츠 섹션을 복제하는 것입니다. 이를 **브릿지 섹션**이라고 부릅니다. 레니스는 스크롤이 전체 콘텐츠 높이를 넘어선 것을 감지하면 뒤로 순간이동합니다.

```css
.bridge {
  위치: 절대;
  top: 100%; /* 실제 콘텐츠 바로 뒤에 위치합니다 */.
}

주요 요점

• 레니스 infinite: true가 수학을 처리합니다.
• 첫 번째 섹션을 하단의 "브리지"로 복제합니다.
• GPU 가속 스크롤을 위해 will-change: transform 사용
• 모바일에서 테스트 - 터치 스크롤의 관성이 다름

그 결과 끝이 없고 유기적으로 느껴지는 스크롤 경험이 탄생했습니다.