프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[SCRIPT] 스크롤 안 움직이게 막기, 스크롤 고정

2018.08.17
우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?

1.마우스의 휠 버튼을 사용하는 경우
2.키보드의 커서키를 사용하는 방법
3.스크롤 바 위에 마우스를 올려 드래그하여 이동하는 방법


이처럼 세가지 방법이 가장 보편적입니다. 이 중에서 오늘은 스크롤을 사용한 이동시 이를 블락하는 방법을 알아보겠습니다. 먼저 스크롤을 막는 것이 왜? 그리고 언제 필요할까요?





# 스크롤의 이동을 막는 것이 필요한 경우
언제 스크롤을 사용한 페이지 이동을 막아야할까요? 먼저 중요한 콘텐츠 화면 영역에서 빠른 스크롤 이동에 의하여 의도한 콘텐츠를 다 못보여주는 경우도 생각해볼 수 있습니다. 이런 경우는 예를 들면... 페이지 스크롤에 따라 화면이 동적으로 변하는 웹사이트의 경우가 이에 해당합니다. 동적으로 변하는 웹사이트를 보여주기 위해 사용자의 스크롤 이동을 강제하는 것이 필요할 수 있습니다.

또 다른 이유로 스크롤이 화면에 고정되야 하는 경우입니다. 햄버거 버튼을 누른 뒤거나 아니면 모달 형식의 팝업창을 띄운 경우가 좋은 예 입니다.



# 스크롤을 고정하는 방법 예제 소스보기
아래의 소스 코드를 봐주세요. 이코드는 스크립트와 CSS를 사용하여 사용자의 페이지 이동을 강제적으로 막고 있습니다. 우선 스크롤이 생기지 않게 하기 위하여 html과 body 태그에 overflow 속성을 사용하였고 그 값으로 hidden을 주었습니다.

또한 해당하는 요소의 브라우저 기본 이벤트를 피하기 위해 아래의 이벤트 함수를 사용합니다. preventDefault()는 이벤트 내장함수의 실행을 막아 의도한 동작만을 방문자에게 보여줍니다. 또한 발생 가능한 아벤트 버블링을 피하기 위해 stopPropagation()을 추가하였습니다. 해당 자바스크립트는 아래와 같이 사용합니다.
event.preventDefault();
event.stopPropagation();

아래 코드를 직접 실행해 보면서 익혀보시기 바랍니다. 코드는 제이쿼리(jQuery)를 사용하여 만든 예제소스입니다.
$('html, body').css({'overflow': 'hidden', 'height': '100%'});
$('#element').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});

위 코드는 스크롤과 터치이동, 마우스휠의 이벤트 발생시 동작하지 않도록 제거합니다. 각각 scrolll, touchmove, mousewheel 이벤트 코드가 추가되어 있습니다.






# 스크롤 이동을 다시 허용하기
만약 다시 스크롤을 허용해야한다면? 이 경우 기존의 마우스 스크롤이벤트의 핸들러를 제거해야하므로 해제방법이 필요할 것입니다. 이때는 등록된 이벤트를 해제하여 주는 off() 메소드를 사용하여 가능합니다. 아래 코드의 예제를 봐주세요.
$('#element').off('scroll touchmove mousewheel');

여기까지 스크롤의 사용자 화면전환을 강제로 막는 방법을 알아보았습니다.

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3513
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3516
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2170
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20765
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 57
225 [소스] Window.scroll() 꿘쓰 2020.06.22 61
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 171
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 325
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 614
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 580
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 685
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 876
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 625
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 667