jquery에서 위/아래 스크롤을 구별 할 수 있습니까?

Question

스크롤 막대가 jquery를 사용하고있는 곳을 확인하는 훌륭한 방법을 찾았지만 사용자가 위 또는 아래로 스크롤했는지 여부를 구별 할 수 있는지 궁금합니다.

Answer 1

마지막 상태를 확인하십시오. 이런 식으로 뭔가 :

이 last_scroll_position, 말, 변수를 유지하고 당신이 스크롤이있을 때, last_scroll_position - current_position > 0 경우, 사용자가이 0보다 작은

Answer 2

아래로 스크롤 업/구분하기 위해이라면 아래까지 스크롤하고, jQuery를, 당신은 사용할 수 있습니다

는

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 
$('#yourDiv').bind(mousewheelevt, function(e){ 

    var evt = window.event || e //equalize event object  
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible    
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF 

    if(delta > 0) { 
     //scroll up 
    } 
    else{ 
     //scroll down 
    } 
}); 

이 방법은 overflow:hidden이 div의 작동합니다.

FireFox, IE 및 Chrome에서 성공적으로 테스트했습니다.

Answer 3

어떤 종류의 전역 변수 없이도이를 수행 할 수있는 간단한 방법이 있습니다. MouseWheel 이벤트에는 스크롤 방향을 명시 적으로 지정하는 속성이 있습니다. 여기를 사용하는 방법은 다음과 같습니다

$("#scroll_div").bind("mousewheel",function(ev) { 
     var curScrollLeft = $(this).scrollLeft(); 
     $(this).scrollLeft(curScrollLeft + Math.round(ev.originalEvent.wheelDelta)); 
    }); 

Answer 4

<script type='text/javascript'> 
$(function(){ 

    var CurrentScroll = 0; 
    $(window).scroll(function(event){ 

     var NextScroll = $(this).scrollTop(); 

     if (NextScroll > CurrentScroll){ 
     //write the codes related to down-ward scrolling here 
     } 
     else { 
     //write the codes related to upward-scrolling here 
     } 

     CurrentScroll = NextScroll; //Updates current scroll position 
    }); 
}); 

Answer 5

스크롤 이벤트

scroll event가 (이 때문에 부드럽게 스크롤의 시간을 많이 해고) 그러나 그것을 FF에서 이상한 동작 공장.

참고 : 스크롤 막대를 드래그 할 때scroll 이벤트는 실제로 커서 키 또는 마우스 휠을 사용하여,을 발생합니다.

는

//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을 살펴 수

휠 이벤트, 그것은 Wheel Event에 대한 좋은 정보를 제공합니다.

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

나는 문서와 예제를 읽어

//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); 
}); 

Answer 6

예를 들어 : Listening to this event across browser
하고, 나는이 조각으로 돌아가 셨습니다 FF, IE, 크롬, 사파리와 몇 가지 테스트 후 바닐라 javascript :

var f = (function(){ 
    var oldPos = window.scrollY; 
    function fu(e) { 
     var newPos = window.scrollY; 
     if (newPos>oldPos) { 
      console.log('down'); 
     } else if(newPos<oldPos) { 
      console.log('up'); 
     } else { 
      console.log('same'); 
     } 
     oldPos = newPos; 
    } 
    return fu; 
})(); 
window.addEventListener('scroll',f);