[JS] 스크롤 막기

스크롤을 막기 위한 방법 중 어떤 것이 더 효과적일까?🤔

실제 사용해보면서 추가로 알게 된 방법과 기존의 방법을 비교해보며 장단점을 정리해봤다.

---

overflow 속성을 사용한 스크롤 막기

장점

• 간단하고 직관적: 코드가 간단해서 이해하기 쉽다.
• 전체 페이지에 적용: 페이지 전체의 스크롤을 쉽게 막을 수 있다.
• 성능: CSS 속성만 변경하기 때문에 성능이 좋다.

단점

• 레이아웃 변화 가능성: position: fixed를 사용하지 않는 경우 레이아웃이 변경될 수 있다.
• 모바일 브라우저 호환성: 일부 모바일 브라우저에서 스크롤이 발생할 수 있다.

// 스크롤 막기
document.body.style.overflow = 'hidden';

// 스크롤 다시 활성화
document.body.style.overflow = '';

---

preventDefault를 사용한 스크롤 막기

장점

• 세밀한 제어: 특정 이벤트에 대해서 스크롤을 막을 수 있다 (예: wheel, touchmove).
• 모바일 브라우저 호환성: 모바일 브라우저에서도 신뢰성 있게 작동한다.

단점

• 복잡성: 이벤트 리스너를 추가하고 제거하는 코드가 필요하다.
• 성능: 이벤트마다 preventDefault를 호출하기 때문에 성능에 영향을 줄 수 있다.

function preventDefault(e) {
  e.preventDefault();
}

// 스크롤 막기
function disableScroll() {
  document.addEventListener('wheel', preventDefault, { passive: false });
  document.addEventListener('touchmove', preventDefault, { passive: false });
}

// 스크롤 다시 활성화
function enableScroll() {
  document.removeEventListener('wheel', preventDefault);
  document.removeEventListener('touchmove', preventDefault);
}

// 스크롤 막기
disableScroll();

// 스크롤 다시 활성화
// enableScroll();

---

결론✍

• 일반적인 경우에는 overflow 속성을 사용하는 것이 더 간단하고 효과적
• 더 세밀한 제어가 필요하거나 모바일 브라우저에서도 확실하게 스크롤을 막아야 하는 경우 preventDefault를 사용

[더 좋은 코드 발견시, 추가 수정!]