개발 Q&A

제목 마우스 휠 이벤트
글쓴이 앙마 작성시각 2014/08/06 09:53:16
댓글 : 0 추천 : 0 스크랩 : 0 조회수 : 13404   RSS
마우스 휠 이벤트를 사용해서 슬라이드 효과를 주려고 하는데요

효과는 일어나게 만들었는데 문제는 화면이 흔들립니다

휠을 하는 순간 위로 한뎁스 위로 올라가거나 내려갔다가 오는 바람에 화면이 흔들리는 모양이 되더군요

$(window).load(function(){
          if (window.addEventListener){
            window.addEventListener('DOMMouseScroll', wheel, false);
            window.onmousewheel = document.onmousewheel = wheel;
        }

        var focusDiv = "num1";
        var scrollHeight = 0;
        var count = 0;

        // 마우스 휠~
        function handle(delta) {
            var htmlbody = $('html,body');
            var s = delta + ": ";
            var jqueryDiv = $("#"+focusDiv+"");
            var lastNum = focusDiv.substr(3);
            if (delta < 0) {
                // 스크롤을 내릴 시 다음 이동할 수 있는 div가 있는지 확인
                if(lastNum <= $(".pagenum").length){
                    // 화면 높이와 마이스 스크롤 높이를 구함
                    // 화면 높이보다 div높이 값이 클 경우를 대비
                    // alert("count : " +count)
                    if(count == 0){
                        focusDiv = "num"+(parseInt(lastNum) + 1);
                        jqueryDiv = $("#"+focusDiv+"");
                        count++;
                    }else if(count == 1){
                        var heightSum = $(window).height();
                        
                        // 현재 보여주는 div와 화면 높이+스크롤 높이 값을 비교하여 화면 높이 값이 클경우 다음 화면으로 이동
                        // alert(heightSum +"                            "+ jqueryDiv.height());
                        if(heightSum >= jqueryDiv.height()){
                            // alert("gggg")
                            htmlbody.animate({ scrollTop: jqueryDiv.offset().top }, 2000, 'easeInOutExpo');
                        }
                        // 이동된 스크롤 위치
                        scrollHeight =  document.body.scrollTop;
                        count = 0;
                    }
                }
            }else {
                if(focusDiv != "num1"){
                    if(count == 0){
                        focusDiv = "num"+(parseInt(lastNum) - 1);
                        jqueryDiv = $("#"+focusDiv+"");
                        count++;
                    }else{
                        htmlbody.animate({ scrollTop: jqueryDiv.offset().top }, 2000, 'easeInOutExpo');
                        count = 0;
                    }
                }else{
                    htmlbody.animate({ scrollTop: 0 }, 2000, 'easeInOutExpo');
                    count = 0;
                }
            }
            // alert("focusDiv  : " +focusDiv + "      count : "+count)
        }

        //마우스 이벤트 
        function wheel(event){
            var delta = 0;
            if (!event) {
                event = window.event;
            }
            if (event.wheelDelta) {
                delta = event.wheelDelta/120;
            if (window.opera) delta = -delta;
            } else if (event.detail){
                delta = -event.detail/3;
            }
            if (delta) {
                handle(delta);
                }
        }
    });

휠 이벤트는 인터넷에 있는 것을 찾아다가 썼고, 나머지는 그냥 만든건데;;

잘 되는 페이지의 소스를 봐도 휠 이벤트는 같은 걸로 되어있어서 이유를 찾기가 어렵네요

그리고 휠을 한번 움직였는데 이벤트는 두번 감지되는 걸로 되는데 이유가 뭘까요?

마지막으로 화면이 흔들리는 이유가 스크롤을 돌렸을 경우 이벤트가 먼저 시작되기 보다 일단 화면의 스크롤이 움직여서 그런 것 같습니다.

스크롤 된 만큼 하단으로 움직였다가 이벤트가 발생해서 그런지 다시 원위치를 찾아간 다음에 이동되는군요

ㅇㅏ래로 10px움직였다가 다시 위로 10px 올라왔다가 내려간다고나 할까요?
 다음글 Pure css framework 에 대해 도움 받을 ... (5)
 이전글 css 사진 이미지 클로즈업 (3)
목록

댓글

없음