스크롤 이벤트 제어

스크롤 이벤트 활용법

스크롤 이벤트는 페이지나 특정 요소가 스크롤될 때마다 발생합니다. 이를 통해 현재 사용자가 페이지의 어느 위치에 있는지 파악하고, 그에 따라 동적인 콘텐츠를 제공할 수 있습니다.

활용 예시

• 동적 콘텐츠 표시: 사용자가 페이지의 특정 지점에 도달하면 추가 정보나 컨트롤을 표시합니다.
• 무한 스크롤 구현: 사용자가 화면 하단에 도달하면 자동으로 새로운 데이터를 로드하여 끊김 없는 콘텐츠 제공이 가능합니다.

window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;
  document.getElementById('currentScroll').innerText = `현재 스크롤 위치: ${scrollPosition}px`;
});

// 현재 스크롤 위치: 150px

위 코드에서는 window.scrollY를 사용하여 현재 스크롤 위치를 가져오고 있습니다. 이 값은 페이지가 스크롤될 때마다 업데이트되며, 이를 활용하여 다양한 인터랙션을 구현할 수 있습니다.

스크롤 방지하기

이벤트 취소로 스크롤 방지하기

키보드나 마우스 휠 등 스크롤을 유발하는 이벤트에 대해 event.preventDefault()를 사용하여 기본 동작을 막을 수 있습니다. 하지만 모든 스크롤 이벤트를 포괄하기 어렵기 때문에 이 방법은 한계가 있습니다.

CSS의 overflow 속성 사용하기

body {
  overflow: hidden;
}

위 코드를 적용하면 페이지 전체의 스크롤이 비활성화됩니다. 특정 요소에만 적용하고 싶다면 해당 요소에 overflow: hidden;을 지정하면 됩니다.

스크롤 이벤트 활용 시 주의사항

• 스크롤 이벤트는 매우 빈번하게 발생하므로, 성능에 신경 써야 합니다.
• 브라우저마다 스크롤 이벤트의 동작이 조금씩 다를 수 있으므로, 충분한 테스트가 필요합니다.