mousewheel.js 사용하기

[ mousewheel.js ]

github : https://github.com/jquery/jquery-mousewheel

cdn: https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js

마우스 휠 이벤트를 이용해 화면이 이동하거나 애니메이션이 작동되도록 할 수 있게 도와주는 플러그인

jquery.mousewheel.min.js

해당파일을 <script>에 넣어주기

jquery, jquery.easing, mousewheel 순으로 로드시켜주기

*DOMMouseScroll 은 파이어폭스용 이벤트명

   
$("div").on("mousewheel DOMMouseScroll", function(event, delta){
	if(delta>0){
  	//마우스 휠 up
    $(this).css("background", "red");
    $("p").text("마우스 휠을 위로!");
  }else if(delta<0){
  	//마우스 휠 down
	  $(this).css("background", "black");
    $("p").text("마우스 휠을 아래로!");    
  }  
});

예제연습

https://jsfiddle.net/jywoo/2L1pm04s/15/

출처 : 인터랙티브 웹디자인북