Contents

Develop
2015.04.14 18:48

[js] 스크롤 이벤트 막기

조회 수 1007 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
웹 개발을 진행하다 보면 유저 인터페이스 구성을 위해 마우스 휠에 의한 스크롤을 막아야 할 경우가 생긴다.
이럴 경우 자바스크립트의 jquery를 이용하여 간단하게 제어할 수 있다.
아래의 소스 코드를 확인해보자.
(※버튼을 이용해 직접 테스트 해볼 수 있다.)
<script type="text/javascript">
    $(window).on("mousewheel.disableScroll DOMMouseScroll.disableScroll touchmove.disableScroll", function(e) {
        e.preventDefault();
        return;
    });
    $(window).on("keydown.disableScroll", function(e) {
        var eventKeyArray = [32, 33, 34, 35, 36, 37, 38, 39, 40];
        for (var i = 0; i < eventKeyArray.length; i++) {
            if (e.keyCode === eventKeyArray [i]) {
                e.preventDefault();
                return;
            }
        }
    });
</script>

<script type="text/javascript">
     $(window).off(".disableScroll");
</script>

위에서 확인한 바와같이 jquery의 on/off 펑션을 이용하여 mousewheel, DOMMouseScroll, touchmove 이벤트 활성/비활성화 시키고 있다.
jquery의 on/off 펑션에 대해서는 jquery의 api를 참고하면 될 듯 하다.
간단하게 설명하자면 .on(이벤트, 핸들러)의 형태로 호출하며 이벤트 파라미터의 경우 단일 혹은 공백문자 구분으로 복수지정이 가능하며 이벤트명 또는 이벤트명과 네임스페이스의 결합형태 로 지정할 수 있다.
위의 소스에서는 mousewheel이라는 이벤트명에 disableScroll이라는 네이스페이가 결합된 형태이다.
네임스페이스는 도트문자[.]로 구분하며 여러계층으로 지정이 가능하다.
해제 펑션의 경우 .off(이벤트)의 형태로 호출하며 이벤트 파라미터는 on과 마찬가지로 지정하면 된다.
제거 시에는 위의 소스에서처럼 네임스페이스로 호출하게 되면 해당 네임스페이스 포함 하위 네임스페이스를 제거가 가능하므로 호출별로 별도로 이벤트 컨트롤이 가능하다.

예제에서 DOMMouseScroll이벤트는 파이어폭스 계열에서는 mousewheel이벤트가 작동하지 않으므로 해당 이벤트로 DOMMouseScroll를 추가해 주어야 하며 touchmove는 태블릿 피시에서의 터치 이벤트에 관여한다.
별도로 호출하고 있는 keydown의 경우는 pageup등의 페이지를 스크롤할 수 있는 키의 이벤트에 관여하여 이벤트를 핸들링한다.

위의 코드를 참고하면 페이지 스크롤을 일시적으로 블럭 시켰다가 다시 해제할 수 있으므로 UI구성시에 도움이 될듯 하다.
<script type="text/javascript">
    var $reiphiel = {};
    $reiphiel.disableScroll= function() {
        $(window).on("mousewheel.disableScroll DOMMouseScroll.disableScroll touchmove.disableScroll", function(e) {
            e.preventDefault();
            return;
        });
        $(window).on("keydown.disableScroll", function(e) {
            var eventKeyArray = [32, 33, 34, 35, 36, 37, 38, 39, 40];
                for (var i = 0; i < eventKeyArray .length; i++) {
                if (e.keyCode === eventKeyArray [i]) {
                    e.preventDefault();
                    return;
                }
            }
        });
    };
    $reiphiel.enableScroll= function() {
        $(window).off(".disableScroll");
    };
</script>


[출처] http://reiphiel.tistory.com/58


?

  1. [ios] 설정에서 푸시 알림(APNS) on/off 상태 확인

    Date2015.04.28 CategoryDevelop Byhooni Views2044
    Read More
  2. [ios] GPS 이용 상태 확인

    Date2015.04.27 CategoryDevelop Byhooni Views1293
    Read More
  3. [js] jQuery, Javascript 모바일(스마트폰) 판단하는 방법

    Date2015.04.26 CategoryDevelop Byhooni Views2449
    Read More
  4. [ppt] iOS 플라랩#03(2015.04.27) 발표 자료

    Date2015.04.24 CategoryPPT Byhooni Views1048
    Read More
  5. [ppt] iOS 플라랩#02(2015.03.19) 발표 자료

    Date2015.04.24 CategoryPPT Byhooni Views889
    Read More
  6. WM미통기 - 10. 조건부확률

    Date2015.04.20 CategoryEtc Byhooni Views704
    Read More
  7. 수리통계학 : 표본공간과 사상-1

    Date2015.04.20 CategoryEtc Byhooni Views899
    Read More
  8. EBS [수학영역] 미적분과 통계 기본 - 정규분포의 의미와 특징은?

    Date2015.04.20 CategoryEtc Byhooni Views1000
    Read More
  9. [js] e.stopPropagation() VS e.preventDefault ()

    Date2015.04.14 CategoryDevelop Byhooni Views808
    Read More
  10. [js] 모바일 스크롤 방지(해제)

    Date2015.04.14 CategoryDevelop Byhooni Views1588
    Read More
  11. [js] 스크롤 이벤트 막기

    Date2015.04.14 CategoryDevelop Byhooni Views1007
    Read More
  12. [ios] 앱에서 설정화면 호출하기

    Date2015.04.07 CategoryDevelop Byhooni Views743
    Read More
Board Pagination Prev 1 ... 13 14 15 16 17 18 19 20 21 22 ... 98 Next
/ 98