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

इस विधि भी divs कि overflow:hidden में काम करता है।

मैं सफलतापूर्वक Firefox, IE और क्रोम में यह परीक्षण किया गया।

Answer 3

किसी भी तरह के वैश्विक चर के बिना इसे करने का एक आसान तरीका है। माउसहेल घटना में एक संपत्ति स्पष्ट रूप से स्क्रॉलिंग दिशा निर्दिष्ट करती है। इसका इस्तेमाल करने के तरीके:

$("#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 एफएफ में अजीब तरह से बर्ताव करता है (यह क्योंकि चिकनाई स्क्रॉल के समय का एक बहुत सक्रिय किया जाता है), लेकिन यह काम करता है।

नोट: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 के बारे में बहुत जानकारी उजागर करता है।

नोट: पहिया घटना केवल निकाल दिया जाता है जब माउसव्हील उपयोग करते हुए; कर्सर कुंजी और स्क्रॉल बार खींचने से ईवेंट को आग नहीं मिलती है।

मैं दस्तावेज़ और उदाहरण पढ़ें: Listening to this event across browser
और एफएफ, आईई, क्रोम, सफारी के साथ कुछ परीक्षणों के बाद, मैं इस स्निपेट के साथ समाप्त हो गया:

//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

के लिए उदाहरण वेनिला जावास्क्रिप्ट:

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