스크롤 이벤트

[JS] 스크롤 방향 감지하기

아래로 이동하고 있는지, 위로 이동하고 있는지를 scroll 이벤트로 감지할 수 있습니다. 예제 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 이전 위치를 기록하여 비교하기 let lastScrollY = 0; addEventListener("scroll", e => { const scrollY = window.scrollY; // 이전의 스크롤 위치와 비교하기 const direction = scrollY > lastScrollY ? "Scroll Down" : "Scroll Up"; // 현재의 스크롤 값을 저장 lastScrollY = scrollY; console.log(direction); }); 현재의 scroll 된 위치는 window..

[JS] 스크롤 애니메이션 구현 (Intersection Observer)

Intersection Observer API로 스크롤 애니메이션을 쉽게 구현할 수 있습니다. Intersection Observer API const options = { root: null, rootMargin: "0px", threshold: 1.0, }; const observer = new IntersectionObserver((entries) => { // 관찰 중인 배열 형식의 객체 리스트 entries.forEach((entry) => { ... }); }, options); // target과 root가 교차되어 화면에 보이게 되었을 때 호출되는 함수 const target = document.querySelector('div'); observer.observe(target); // 새로..