[JavaScript] 스크롤 제어하기 및 스크롤 숨기는 방법

개념

특정 모달창을 띄우거나 유저들이 그냥 지나치면 안 되는 내용의 페이지를 표시하기 위해 개발자는 웹사이트의 스크롤을 제어할 수 있다. Jquery를 이용하여 간단하게 제어하는 방법을 알아보자.

 

방법

스크롤 제어하기

$(window).on('scroll touchmove mousewheel, function(e){  
	e.preventDefault(); 
}'); //  스크롤 제어
document.documentElement.style.overflowY = "hidden";  //  스크롤 숨김

window에 스크롤과 터치, 마우스 휠 동작을 e.preventDefault()를 통하여 제어해주었다. (window 대신 html 혹은 특정 엘리먼트(부모 단위)의 id/class를 입력해줘도 된다.)

e.preventDefault()는 스크롤과 같은 동작 또는 a 태그의 href, input 태그의 submit 등과 같은 브라우저의 기본 이벤트들을 작동하지 못하게 해주는 메서드이다. 스크롤 제어뿐만 아니라 여러 방면으로 유용한 메서드이므로 꼭 기억해두는 게 좋다.

 

스크롤 숨김은 간단히 document의 style.overflowY를 hidden 처리해주었다.

 

스크롤 제어 풀기

$(window).off('scroll touchmove mousewheel');  //  스크롤 동작
document.documentElement.style.overflowY = "auto";  //  스크롤 보이기

스크롤을 제어하고 숨겼다면, 반대로 다시 동작하는 코드도 알아야 한다.  다시 동작하는 코드는 매우 간단한데, 그저 on을 off로 바꿔주면 끝이다.