레이피엘의 블로그

 웹 개발을 진행하다 보면 유저 인터페이스 구성을 위해 마우스 휠에 의한 스크롤을 막아야 할 경우가 생긴다. 이럴경우 자바스크립트의 jquery를 이용하여 간단하게 제어할 수 있다. 아래의 소스 코드를 확인해보자.(※버튼을 이용해 직접 테스트 해볼 수 있다.)

<script type="text/javascript">
    $(document).on("mousewheel.disableScroll DOMMouseScroll.disableScroll touchmove.disableScroll", function(e) {
        e.preventDefault();
        return;
    });
    $(document).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">
     $(document).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구성시에 도움이 될듯 하다.

※IE7에서 동작하지 않는 케이스가 있어 http://www.quirksmode.org/dom/events/scroll.html 참고하여  이벤트 핸들링 을  window에서 document로 변경하였습니다.

 Internet Explorer8 또는 9 버전을 이용해서 웹 페이지를 작성하다 jquery의 ajax호출을 이용 화면의 구성요소를 호출할 경우아래와 같은 스크립트 에러로 인하여 화면의 일부 구성요소들이 로딩되지 않는 현상이 발생하는 경우가 있다.

 이 경우 ie의 경우 여타의 브라우저(Firefox, Chrome)처럼 상세한 에러 메시지를 발생시켜 주지 않아서 에러를 특정하고 배제하는데 생각외로 시간이 걸리는 경우가 있다. 이럴 경우 아래와 같은 부분을 후보로 올리고 에러를 특정해 보는 것이 유효할 듯 하다.

주요 원인

ajax를 이용하여 Javascript를 구문을 호출할 경우 구문 체크가 매우 엄격하게 일어나는 듯 하다.

적용 가능한 해결책 리스트

1. 자바스크립트 구문 에러

불러올 대상의 스크립트 요소 중 일부에서 스크립트 구문 오류가 있을 경우 위와 같은 에러를 만날 수 있다.

※필자의 경우는 아래처럼 스크립트의 텍스트 출력방지를 위한 주석 처리에 실수가 있었던 경우였다.(커맨트 열고 닫지 않았다. 초보적인 미스 ㅜㅜ)

<script type='text/javascript'>
//<!--
    /* 스크립트 구문 */
</script>

2. 여분의 콤마

아래처럼 배열의 마지막 요소 다음에 콤마가 남아 있는 경우가 있다. 로직상의 미스일 경우도 있고 프로그래밍의 편의상 남겨둔 경우도 있으나 상황에 따라 구문에러인 경우도 있고 정상적으로 동작하는 경우도 있으므로 여분의 콤마는 배제하여 일관적으로 동작할 수 있도록 하자.

<script type='text/javascript'>
var arr = ['item1','item2',];
</script>

 위에서 열거한 케이스 이외에도 여러가지 케이스가 있을 수 있지만 위의 내용만 잘 고려해도 에러를 어느정도 방지할 수 있다고 생각된다.