웹페이지 CSS를 사용하여 스크롤을 이동하지 않도록 막는 다양한 방법에 대하여 알아보려고 합니다. 특히 모바일 환경에서의 이슈도 함께 알아봅니다.



# 웹사이트 스크롤을 이동하지 않도록 고정하기콘텐츠의 길이가 길면 상하 스크롤이 나타나겠죠. 만약 이런 스크롤이 안보이도록... 이동하지 않도록 하려면 어떻게 할 수 있을까요? 그 전에 스크롤 이동을 언제 왜 막아야할까요? 가장 많이 사용되는 이유입니다.

1. 모달, 팝업 등 을 보여주는 경우 뒤 화면이 이동하지 않도록 하기
2. 로딩등의 이유로 딤드(dimmed) 처리된 경우

방법은 아래와 같이 세 가지가 존재합니다. 하나씩 알아봅니다. 


! overflow: hidden을 사용하는 방법이 방법도 css만 사용하므로 매우 간편하고 효과적인 방법입니다. 동일하게 스크롤 영역이 존재하는 태그에 overflow: hidden을 추가하면 되죠.
body { overflow: hidden; }

단점이라면? 일부 모바일 및 기타 환경에서 스크롤 이동 가능할 수 있습니다  하지만 데스크탑 등 대부분의 환경에서는 스크롤 동작이 되지 않습니다. 이유를 알아보면 fixed 처럼 고정을 시키는게 아니기 때문에 터치 이벤트를 사용하는 환경 등에서 스크롤이 동작할 수 있습니다. 이런 문제를 보완하기 위해서 height: 100%를 함께 사용하는게 더 안전한 방법입니다.
body {
  overflow: hidden;
  height: 100%;
}

그럼 다음은 모바일 환경을 고려한 방법입니다.


! css overflow: hidden과 touch-action 사용하기
이 방법은 모바일 특히 iOS 등에서 사용하기 위한 방법입니다. 스크롤과 터치 css 속성을 동시에 사용하는 방법이죠.
body { overflow: hidden; }
body * { touch-action: none; }

여기서 body * 선택자를 사용한 이유는 touch-action은 해당 영역에서만 동작하기 때문입니다. 즉 부모 요소에서 상속(inherit) 되어 동작하지 않습니다.


! CSS position:fixed를 사용하는 방법
추천하는 방법입니다. position: fixed를 사용하는 방법은 css만 사용하므로 간단하고 모바일 및 다양한 환경에서 가장 확실히 동작하는 방법이죠. 방법은 스크롤이 존재하는 태그가 body라면 body 태그 영역에 position:fixed 스타일을 추가하면 됩니다.
body { position: fixed; }

가장 추천하는 방법이지만 단점이 존재합니다. 기존의 스크롤이 사라지기 때문에 position: fixed 속성을 제거할 경우 스크롤 위치가 리셋된다는 점이죠. 다시 말해 스크롤 중간에 위치했던 부분이 사라지는 단점이 있습니다. 큰 이슈는 아니므로 큰 문제가 안된다면 이 방법도 괜찮은 방법입니다.



# 모바일 환경에서의 알아야 할 점모바일 웹의 경우 iOS 버전 등에 따라 스크롤링이 다르게 나타날 수 있습니다. 앞에 언급한 것 처럼 터치 이벤트 등 이벤트 제거가 데스크탑 환경과 다른 이유입니다. 이런 이유로 아래의 방법이 선호됩니다.
position: fixed;

아니면 아래처럼 두 가지 방법을 함께 사용합니다.
overflow: hidden;
touch-action: none;

다른 방법으로는 자바스크립트로 아예 스크롤 이벤트 자체를 제어하는 방법입니다.


여기까지 CSS를 사용한 다양한 스크롤 이동 제어, 제거 방법에 대하여 자세히 알아봤습니다. 아래는 함수를 하나 만들어 원하는 태그에 overflow: hidden; height: 100%를 사용하여 스크롤이 동작하지 않도록 만들어보려고합니다.


! 스크롤 제어하는 함수 만들기, toggleScrolling();함수 toggleScrolling()을 실행하면 스크롤이 사라지게 되겠죠. 한 번 더 클릭하면 다시 나타나는 토글 방식의 스크롤입니다.

@ toggleScrolling() 함수 만들기
toggleScrolling = function(_selector) {
  let ele = document.querySelector(_selector);
  if(!ele) { return };
  if (ele.style.overflow === 'hidden') {
    ele.style.overflow = '';
    ele.style.height = '';
  } else {
    ele.style.overflow = 'hidden';
    ele.style.height = '100%';
  }
};

코드는 모두 완성되었습니다. 선택한 엘리먼트의 css ovefflow 속성값이 hidden인지 확인 후  토글 방식으로 동작합니다.

그럼 간단한 예제를 만들어볼께요. 버튼은 함수를 실행시킵니다.
<div id="test">
  a<br/>
  b<br/>
  c<br/>
  d<br/>
  e<br/>
</div>

<button onclick="toggleScrolling('#test')">Click!</button>

아래 엘리먼트에는 스크롤이 있는데 버튼을 클릭하면 스크롤이 사라지고 나타나고를 반복하게 되겠죠. 그럼 클릭해보세요.

a
b
c
d
e