[제이쿼리]- 마우스 휠 이벤트 / 업버튼 만들기

마우스 휠 이벤트

 

마우스 휠 이벤트의 주 이벤트는 scroll 이벤트이다. 

마우스 휠을 움직일때마다 이벤트가 발생한다. 

이때 이벤트 객체 안에 있는 deltaY 프로퍼티를 함께 사용한다. 

 

deltaY프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때 세로 스크롤이 움직인 픽셀 값을 반환한다. 

deltaX프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때  가로  스크롤이 움직인 픽셀 값을 반환한다. 

deltaZ프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때  z축이 움직인 픽셀 값을 반환한다. 

 

 

[기본형]

-단독 이벤트
$('이벤트대상').wheel(function(){ 코드});


-그룹 이벤트
$('이벤트대상').on("wheel", function( ){ 코드 })


-강제 이벤트
$('이벤트 대상').wheel();

---

마우스 휠이 움직일 때 델타값을 가져오기

//마우스 휠을 위 아래로 움직였을 때 델타값을 얻어오는 이벤트

            $(window).on('wheel', function(event){

                console.log(event.originalEvent.deltaY)

                // 마우스를 위로 올렸을 때 음수값을 반환한다. 0보다 작다. else그게 아니라 양수면,

                if(event.originalEvent.deltaY < 0){

                    console.log('마우스 휠 위로')

                }else{

                    console.log('마우스 휠 아래로')

                }

            })

마우스가 위로 올라가면 음수, 아래로 내려가면 양수

---

업버튼

 <!-- 업버튼 -->

    <a href="#" id="top">TOP</a>

//업버튼

        $("#top").on("click", function (event) {

          //a태그의 기본 이벤트 제거

          event.preventDefault();

          // 클릭하면 스크롤 위치 확인하기

          console.log("scrollTop : " + $(window).scrollTop());

          //부드러운 화면 스크롤

          //html태그를 선택하여 움직임을 준다. 이때 scrollTop의 위치를 0px자리로 이동. 1초동안 1000 = 1

          $("html").animate({ scrollTop: 0 }, 1000);

        });