[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기

Posted at 2019. 1. 31. 18:16 | Posted in JavaScript & jQuery/jQuery




참고 : http://2nusa.blogspot.com/2016/10/jquery-mouse-wheel.html





■ 한화면 단위로 끊어서 마우스 휠 이동시키기





해당코드는 jQuery 한화면 단위 Mouse Wheel 이동 포스팅을 가져와서 만든 내용이다.


위포스팅의 코드를 그대로 사용할 수 없는 상황이 되었기에 필요 부분을 수정하여 포스팅한다.

(파이어 폭스 브라우저에서 에러 발생 및 콘솔창 발생 에러 예외처리)




# 소스코드

<html>

<head>

<title>MouseWheel</title>

<style type="text/css">

    html,body{ margin:0;padding:0;width:100%;height:100%;}

    .box{ width:100%;height:100%;position:relative;color:#FFFFFF;font-size:24pt;}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

    jQuery(document).on("ready", function() {
        jQuery(".box").each(function () {
            
            // 개별적으로 Wheel 이벤트 적용
            jQuery(this).on("mousewheel DOMMouseScroll", function(event) {

                var delta = 0;
                var moveTop = null;
                var boxMax = jQuery(".box").length - 1;

                var winEvent = "";

                  
                if(!winEvent) {
                    winEvent = window.event;
                }

                if(winEvent.wheelDelta) {

                    delta = winEvent.wheelDelta / 120;
                    if(window.opera) {
                        delta = -delta;
                    }
                }

               
                else if(winEvent.detail) {
                    delta = -winEvent.detail / 3;
                }
                
                // 마우스휠을 위에서 아래로 이동
                if(delta < 0) {

                    // 마지막 BOX 보다 순서값이 작은 경우에 실행
                    if(jQuery(this).index() < boxMax) {
                        
                        console.log("▼");
                        if(jQuery(this).next() != undefined) {
                            moveTop = jQuery(this).next().offset().top;
                        }
                    }

                    // 마지막 BOX보다 더 아래로 내려가려고 하는경우 알림창 출력
                    else {
                        alert("마지막 페이지 입니다.");
                        return false;
                    }
                }

                // 마우스휠을 아래에서 위로 이동
                else {

                    // 첫번째 BOX 보다 순서값이 큰 경우에 실행
                    if(jQuery(this).index() > 0) {

                        console.log("▲");
                        if(jQuery(this).prev() != undefined) {
                            moveTop = jQuery(this).prev().offset().top;
                        }
                    }

                    // 첫번째 BOX 더 위로 올라가려고 하는 경우 알림창 출력
                    else {
                        alert("첫번째 페이지 입니다.");
                        return false;
                    }
                }

                // 화면 이동 0.8초(800)
                jQuery("html,body").stop().animate({
                    scrollTop : moveTop + "px"
                }
                , {
                    duration: 800, complete : function () { }
                });
            });
        });
    });
</script>
</head>
<body>
    <div class="box" style="background-color:#FF0000;">1</div>
    <div class="box" style="background-color:#FF4500;">2</div>
    <div class="box" style="background-color:#FFFF00;">3</div>
    <div class="box" style="background-color:#008000;">4</div>
    <div class="box" style="background-color:#0000FF;">5</div>
    <div class="box" style="background-color:#4B0082;">6</div>
    <div class="box" style="background-color:#EE82EE;">7</div>
</body>
</html>




# 출력결과



마우스 휠로 스크롤을 하며 상, 하 스크롤을 진행하다보면.


위 이미지와 같이 자동으로 다음 화면으로 이어지는 것을 확인할 수 있다.










  1. 퍼블리셔
    이소스 그대로 붙여서 html 만든뒤에 돌려봤는데 첫번째 페이지에서 하단으로 마우스 휠시 계속 첫번째 페이지입니다라고 알럿뜨면서 안내려가지네요
    • 2019.07.19 13:23 신고 [Edit/Del]
      다시 테스트 해보니
      해당코드는 파이어 폭스에서만 정상 작동 하더군요.
      크롬이나 익스에서 테스트 하신것 같은데.
      확인후 다시 코드 올리겠습니다.

      전혀 파악하지 못한 사항인데
      알려주셔서 감사합니다.
    • 2019.07.19 18:40 신고 [Edit/Del]
      안녕하세요~
      크롬과 익스에서도 문제없이 돌아가도록
      코드를 조금변경해 두었습니다.
      감사합니다.
  2. 페이지를 아래로 내릴 때는 첫번째 페이지라고 계속 뜨고, 맨 아래나 첫번째가 아닌 div로 가서 휠을 올리거나 내리면 위로 올라가는 동작이 됩니다. 그래서 찾아보다가 선언한 winEvent대신에 함수에서 받아오는 event로 대체해서 사용하니 정상작동하는데 왜그러는지 아시나요? ㅠ
    제 코드에서는 winEvent대신 event를 사용해야하고 올려주신 코드에서는 event를 사용하면 위의 문제가 뜨네요
    • 2020.06.21 10:00 신고 [Edit/Del]
      제가 winEvent라고 사용한 이유는
      window.event 라고 계속 쓰면서 사용하기가 좀그랬기 때문이지.
      다른이유는 없습니다.

      작성한지 1년이 더지난 포스팅이기때문에
      추후 뭔가 브라우저가 업데이트 되면서 바뀐부분이 있나 하고 살펴 보았지만.
      문제가 없네요.

      예상가는 에러는
      1. jQuery 버전( 포스팅 코드는 1.12.4 버전)
      2. 브라우저가 혹시 익스이신가요?
    • 2020.06.21 21:33 신고 [Edit/Del]
      아이고.. 왜 이런지 찾으려고 계속 코드를 봐도 어디가 잘못되었는지 몰랐는데요.. event를 쓸때는 스크립트상에서 처음 변수 선언을 하고 if문을
      if (event) {
      event = window.event;
      } 로 사용하고

      winEvent를 쓸때는
      if(!winEvent) {
      winEvent = window.event;
      }
      이렇게 사용해서 동작이 됬던거였네요..하하...
      서로 !를 반대로 쓰면 똑같이 동작을 안하네요...
      답변 너무 감사드립니다..ㅠㅠ 그래도 덕분에 스크롤 이벤트도 잘 적용했습니다ㅠ
    • 2020.06.22 09:36 신고 [Edit/Del]
      잘 해결 되셨다니 다행입니다. ㅋㅋ
      무더운 여름에 코딩도 쉬엄쉬엄 하세요~

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기