[JS] 스크롤 이벤트 부드럽게 처리하는법

스크롤 이벤트를 부드럽게 처리하는 방법은
lenis 라이브러리을 사용하면 간단하다.

lenis 라이브러리를 사용하여 스크롤 이벤트를 부드럽게 처리하는 JavaScript 코드는 다음과 같이 작성할 수 있다.

// lenis 인스턴스 생성
const lenis = new Lenis({
    lerp: 0.1, // 부드러운 이동을 위한 보간 값 설정
    wheelMultiplier: 0.7, // 마우스 휠 스크롤 속도 제어
    gestureOrientation: "vertical", // 제스처(터치 입력) 방향 설정
    normalizeWheel: false, // 마우스 휠 값 정규화 설정
    smoothTouch: false // 터치 입력(스와이프) 부드럽게 처리 설정
});

// requestAnimationFrame으로 렌더링 처리
function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
}

// 페이지 로드 후 raf 함수 호출하여 애니메이션 시작
document.addEventListener('DOMContentLoaded', function() {
    requestAnimationFrame(raf);
});

이 코드는 다음과 같은 작업을 수행한다.

1. Lenis 클래스의 인스턴스를 생성하여 스크롤 이벤트를 부드럽게 처리한다.

=> 이 때 설정값으로는 lerp, wheelMultiplier, gestureOrientation, normalizeWheel, smoothTouch를 제공한다.

2. requestAnimationFrame을 사용하여 페이지가 로드된 후에 애니메이션을 시작한다.

3. raf 함수를 호출하여 스크롤 이벤트를 부드럽게 처리하는 애니메이션을 시작합니다.

이 코드를 사용하면 lenis 라이브러리를 통해 스크롤 이벤트를 부드럽게 처리할 수 있다. 페이지가 로드되면 스크롤 애니메이션도 함께 시작된다.