1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>MouseWheel</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> // 적용할 클래스명 var className = "box"; // 지금의 스크롤 위치를 담을 변수 var currentScroll = 0; // 에니메이션 효과를 주기위한 function 명 선언 var tim; window.onload = function () { /* Div Class 명 */ // box클래스 추출 var elm = document.getElementsByClassName(className); // box클래스 개수만큼 실행 for (var i = 0; i < elm.length; i++) { // box 에 각각 마우스 휠 감지 // 휠감지 elm[i].addEventListener("mousewheel", MouseWheelHandler, false); // firefox 용 휠처리 elm[i].addEventListener("DOMMouseScroll", MouseWheelHandler, true); } } function MouseWheelHandler(e) { // 스크롤 취소시킴(이걸 안할경우 도중에 명령을 받아 화면이 덜덜 거릴수 있음) e.preventDefault(); // 휠값처리 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; // 여러개일경우 다른 selector 을 확인하기위한 상위 dom 으로 이동 var p = e.target.parentElement; // 몇번째 dom 인지 저장 var index = Array.prototype.indexOf.call(p.children, e.target); // 같은 위치의 돔목록 을 저장 var elmArr = e.target.parentElement.children; // 지금의 스크롤 위치 저장 currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // 다음위치의 좌표(기본이므로 현재의 Y 좌표 저장) var NextTarget = currentScroll; // 마우스휠 위로 if (delta > 0) { // 맨처음 지점 제외 if (index > 0) { // 이전 dom 의 index 번호 var no = (index - 1); // 좌표위치 저장 NextTarget = elmArr[no].offsetTop; } } // 마우스휠 아래로 else if (delta < 0) { // 맨마지막 지점 제외 if (index < elmArr.length - 1) { // 다음 dom 의 index 번호 var no = (index + 1); // 좌표위치 저장 NextTarget = elmArr[no].offsetTop; } } // 애니메이션 // 필요없으면 바로 window.scrollTo(0, NextTarget); // 에니메이션 초기화 clearInterval(tim); // 애니메이션 실행 tim = setInterval(tran, 1); // 애니메이션 function function tran() { // 이동속도 숫자가 작아질수록 느려짐 var speed = 5; // 현재 스크롤과 이동후 스크롤이 같으면 정지시킨다 if (currentScroll == NextTarget) { clearInterval(tran); } else { // 스크롤을 위로 올릴 경우 if (currentScroll - speed > NextTarget) { currentScroll -= speed; } // 스크롤을 내일 경우 else if (currentScroll + speed < NextTarget) { currentScroll += speed; } // 스크롤이 속도로 지정된 변수보다 작을 경우 강제적으로 맞춰준다 else { currentScroll = NextTarget; } // 스크롤위치 변경 window.scrollTo(0, currentScroll); } } } </script></head><body> <div class="box" style="background-color:red;">1</div> <div class="box" style="background-color:orange;">2</div> <div class="box" style="background-color:yellow;">3</div> <div class="box" style="background-color:green;">4</div> <div class="box" style="background-color:blue;">5</div> <div class="box" style="background-color:indigo;">6</div> <div class="box" style="background-color:violet;">7</div></body></html> |
JQuery 한화면 단위 Mouse Wheel 이동 를 참고해서 그냥 Javascript 로...
