[javascript] jQuery 스크롤 이벤트의 방향을 어떻게 확인할 수 있습니까?

JAVASCRIPT / 글쓴이

나는이 효과에 뭔가를 찾고 있습니다 :

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

어떤 아이디어?

답변

현재 및 scrollTop이전 확인scrollTop 

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

답변

다른 모든 예제에서 요구하는 것처럼 이전 스크롤 상단을 추적하지 않고도 할 수 있습니다.

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

나는 이것에 대한 전문가가 아니기 때문에 더 연구 해 주시기 바랍니다. 그러나를 사용할 때 $(element).scroll듣는 이벤트는 ‘스크롤’이벤트 인 것으로 보입니다 .

그러나 mousewheel바인드를 사용하여 이벤트 를 구체적으로 수신 하면originalEvent 콜백에 대한 이벤트 매개 변수 속성에 다른 정보가 포함됩니다. 그 정보의 일부는입니다 wheelDelta. 양수이면 마우스 휠을 위로 움직입니다. 음수이면 마우스 휠을 아래로 움직입니다.

내 생각 엔 mousewheel페이지가 스크롤되지 않더라도 마우스 휠이 돌아 가면 이벤트가 발생 한다는 것입니다. ‘스크롤’이벤트가 발생하지 않은 경우입니다. 원하는 경우 event.preventDefault()콜백 맨 아래에서 호출 하여 페이지가 스크롤되는 것을 방지하고 일부 유형의 확대 / 축소 기능과 같이 페이지 스크롤 이외의 항목에 마우스 휠 이벤트를 사용할 수 있습니다.

답변

이전 스크롤 위치를 저장 한 다음 새 스크롤 위치가 그보다 크거나 작은 지 확인하십시오.

전역 변수를 피하는 방법은 다음과 같습니다 (여기에서 바이올린 사용 가능 ).

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

답변

기존 솔루션

이 게시물과 다른 답변 에서 3 가지 솔루션 이있을 수 있습니다 .

해결책 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

해결책 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

해결책 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

멀티 브라우저 테스트

Safari에서 테스트하지 못했습니다.

크롬 42 (Win 7)

  • 해결책 1
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트

Firefox 37 (Win 7)

  • 해결책 1
    • 업 : 1 스크롤 당 20 이벤트
    • 다운 : 1 스크롤 당 20 개의 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 아래로 : 1 스크롤 당 1 이벤트
  • 해결책 3
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다

IE 11 (Win 8)

  • 해결책 1
    • Up : 1 스크롤 당 10 개의 이벤트 (부작용 : 마지막으로 Down Scroll 발생)
    • 아래로 : 1 스크롤 당 10 개의 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • Up : 작동하지 않습니다
    • 아래로 : 1 스크롤 당 1 이벤트

IE 10 (Win 7)

  • 해결책 1
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트

IE 9 (Win 7)

  • 해결책 1
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트

IE 8 (Win 7)

  • 해결책 1
    • Up : 1 스크롤 당 2 개의 이벤트 (부작용 : 마지막으로 다운 스크롤이 발생 함)
    • 다운 : 1 스크롤 당 2 ~ 4 개의 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트

결합 된 솔루션

IE 11 및 IE 8의 부작용이 if else진술 에서 나온 것임을 확인했습니다 . 그래서 if else if다음과 같이 진술로 대체했습니다 .

멀티 브라우저 테스트에서 일반 브라우저 에는 솔루션 3 을 , 파이어 폭스 및 IE 11에는 솔루션 1 을 사용하기로 결정했습니다 .

IE 11을 감지하기 위해이 답변 을 참조 했습니다 .

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

답변

나는 이미 받아 들여진 대답이 있었지만 다른 사람을 도울 수 있도록 사용중인 것을 게시하고 싶다는 것을 알고 있습니다. cliphex마우스 휠 이벤트와 같은 방향 이지만 Firefox는 지원합니다. 잠금 스크롤과 같은 일을하고 현재 스크롤 상단을 가져올 수없는 경우이 방법으로 유용합니다.

여기 에서 라이브 버전을 참조 하십시오 .

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});

답변

스크롤 이벤트

스크롤 이벤트 이상한 FF에서 동작합니다 (이것은 때문에 스크롤 부드러움의 시간을 많이 해고) 만 작동합니다.

참고 : 스크롤 실제로 이벤트가 해고 스크롤 막대를 드래그 할 때 커서 키 또는 마우스 휠을 사용하여. 

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

휠 이벤트

또한 MDN을 살펴볼 수 있으며 휠 이벤트 에 대한 유용한 정보를 제공합니다 .

참고 : 휠 이벤트 는 마우스 휠을 사용할 때만 발생합니다 . 커서 키와 스크롤 막대를 드래그해도 이벤트가 발생하지 않습니다.

나는 문서와 예제를 읽었습니다 : 브라우저를 통해이 이벤트를 듣고
FF, IE, chrome, safari로 테스트 한 후이 스 니펫으로 끝났습니다. 

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

답변

포인터 장치 (마우스 또는 트랙 패드)를 사용하여 위 또는 아래로 스크롤하는지 알고 싶은 경우 이벤트 의 deltaY 속성을 사용할 수 있습니다 wheel.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});
.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>

스 니펫 확장