दिलचस्प पोस्ट
मुंगुआ का उपयोग करते समय प्रश्न हल हो जाता है। कन्टेनक्शन () बनाम मुंगोज़। कनेक्शन () SQL सर्वर: MAX (DATE) के साथ केवल पंक्तियां चुनें ओरेकल में मिलीसेकंड में दो टाइमस्टैम्प के बीच अंतर की गणना करना जब स्थिर सी ++ क्लास सदस्यों को आरंभ किया जाता है? स्ट्रटोक विभाजन की गलती जावास्क्रिप्ट में सेट इन्टरलेबल कॉल बंद करें क्लाइंट का IP पता प्राप्त करना: REMOTE_ADDR, HTTP_X_FORWARDED_FOR, और क्या उपयोगी हो सकता है? हाइबरनेट के साथ स्प्रिंग सुरक्षा 3 डेटाबेस प्रमाणीकरण स्तंभों में पाई चार्ट के लिए किंवदंती कैसे प्रदर्शित करें? एक .NET ऑब्जेक्ट की स्मृति ओवरहेड क्या है प्रोटोकैक्टर: element.getText () एक ऑब्जेक्ट रिटर्न करता है और स्ट्रिंग नहीं अपने सभी बच्चों सहित एक शाखा रिबसिंग सी ++ में एक मैट्रिक्स को स्थानांतरित करने का सबसे तेज़ तरीका क्या है? सूचकांक एएससी द्वारा आप जेओएस ऑब्जेक्ट्स को क्रॉस और ओपेरा कैसे रोकते हैं? एंड्रॉइड देखें.ग्रेडिंग कैश शून्य, केवल अशक्त का रिटर्न देता है

मैं कैसे एक jQuery स्क्रॉल घटना की दिशा निर्धारित कर सकते हैं?

मैं इस आशय के लिए कुछ ढूंढ रहा हूं:

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

कोई विचार?

वेब के समाधान से एकत्रित समाधान "मैं कैसे एक jQuery स्क्रॉल घटना की दिशा निर्धारित कर सकते हैं?"

वर्तमान 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 करें, लेकिन ऐसा प्रतीत होता है कि जब आप $(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'); } }); 

बहु ब्राउज़र टेस्ट

मैं इसे सफारी पर परीक्षण नहीं कर सका

क्रोम 42 (विन 7)

  • समाधान 1
    • ऊपर: 1 ईवेंट प्रति 1 स्क्रॉल
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल
  • समाधान 2
    • अप: काम नहीं कर रहा
    • नीचे: काम नहीं कर रहा है
  • समाधान 3
    • ऊपर: 1 ईवेंट प्रति 1 स्क्रॉल
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल

फ़ायरफ़ॉक्स 37 (7 विन)

  • समाधान 1
    • ऊपर: 1 स्क्रॉल प्रति 20 ईवेंट
    • नीचे: 1 स्क्रॉल प्रति 20 ईवेंट
  • समाधान 2
    • अप: काम नहीं कर रहा
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल
  • समाधान 3
    • अप: काम नहीं कर रहा
    • नीचे: काम नहीं कर रहा है

आईई 11 (विन 8)

  • समाधान 1
    • ऊपर: 1 स्क्रॉल प्रति 10 ईवेंट (साइड इफेक्ट: नीचे स्क्रॉल अंत में हुआ)
    • नीचे: 1 स्क्रॉल प्रति 10 ईवेंट
  • समाधान 2
    • अप: काम नहीं कर रहा
    • नीचे: काम नहीं कर रहा है
  • समाधान 3
    • अप: काम नहीं कर रहा
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल

आईई 10 (विन 7)

  • समाधान 1
    • ऊपर: 1 ईवेंट प्रति 1 स्क्रॉल
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल
  • समाधान 2
    • अप: काम नहीं कर रहा
    • नीचे: काम नहीं कर रहा है
  • समाधान 3
    • ऊपर: 1 ईवेंट प्रति 1 स्क्रॉल
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल

आईई 9 (विन 7)

  • समाधान 1
    • ऊपर: 1 ईवेंट प्रति 1 स्क्रॉल
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल
  • समाधान 2
    • अप: काम नहीं कर रहा
    • नीचे: काम नहीं कर रहा है
  • समाधान 3
    • ऊपर: 1 ईवेंट प्रति 1 स्क्रॉल
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल

आईई 8 (विन 7)

  • समाधान 1
    • ऊपर: 1 स्क्रॉल प्रति 2 ईवेंट (साइड इफेक्ट: नीचे स्क्रॉल अंत में हुआ)
    • नीचे: 1 स्क्रॉल प्रति 2 ~ 4 घटनाएं
  • समाधान 2
    • अप: काम नहीं कर रहा
    • नीचे: काम नहीं कर रहा है
  • समाधान 3
    • ऊपर: 1 ईवेंट प्रति 1 स्क्रॉल
    • नीचे: 1 ईवेंट प्रति 1 स्क्रॉल

संयुक्त समाधान

मैंने जाँच किया कि IE 11 और IE 8 से उस साइड इफेक्ट आइए if else कथन से आए इसलिए, मैं इसे if else if स्टेटमेंट को निम्नलिखित के रूप में बदलता हूं।

बहु ब्राउज़र परीक्षण से, मैंने सामान्य ब्राउज़र के लिए समाधान 3 का उपयोग करने का निर्णय लिया और फ़ायरफ़ॉक्स और आईई 11 के लिए समाधान 1 का इस्तेमाल किया।

मैं आईई 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 घटना के साथ cliphex तरह दिशा cliphex , लेकिन फ़ायरफ़ॉक्स के लिए समर्थन के साथ यदि आप लॉकिंग स्क्रॉल की तरह कुछ कर रहे हैं और वर्तमान स्क्रॉल शीर्ष नहीं प्राप्त कर सकते हैं, तो यह इस तरह से उपयोगी है।

यहां एक लाइव संस्करण देखें

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

स्क्रॉल ईवेंट

स्क्रॉल ईवेंट एफएफ में अजीब व्यवहार करता है (यह चिकनाई स्क्रॉलिंग के कारण बहुत समय से निकाल दिया गया है) लेकिन यह काम करता है।

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

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

व्हील इवेंट

आप एमडीएन पर एक नज़र भी देख सकते हैं, यह व्हील इवेंट के बारे में बहुत अच्छी जानकारी का खुलासा करता है

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

मैं दस्तावेज़ और उदाहरण पढ़ता हूं: इस घटना को पूरे ब्राउज़र में सुनना
और एफएफ, आईई, क्रोम, सफारी के साथ कुछ परीक्षणों के बाद, मैं इस स्निपेट के साथ समाप्त हुआ:

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

यदि आप केवल जानना चाहते हैं कि आप स्क्रॉल करते हैं या नीचे एक पॉइंटर डिवाइस (माउस या ट्रैक पैड) का उपयोग करते हैं, तो आप 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> 
 var tempScrollTop, currentScrollTop = 0; $(window).scroll(function(){ currentScrollTop = $("#div").scrollTop(); if (tempScrollTop > currentScrollTop ) { // upscroll code } else if (tempScrollTop < currentScrollTop ){ // downscroll code } tempScrollTop = currentScrollTop; } 

या मूसुहेल विस्तार का उपयोग करें , यहां देखें।

पृष्ठ के ऊपर और नीचे किसी भी स्नैप / गति / बाउंस को अनदेखा करने के लिए, यहां योशीय के स्वीकृत उत्तर का एक संशोधित संस्करण है:

 var prevScrollTop = 0; $(window).scroll(function(event){ var scrollTop = $(this).scrollTop(); if ( scrollTop < 0 ) { scrollTop = 0; } if ( scrollTop > $('body').height() - $(window).height() ) { scrollTop = $('body').height() - $(window).height(); } if (scrollTop >= prevScrollTop && scrollTop) { // scrolling down } else { // scrolling up } prevScrollTop = scrollTop; }); 

आप मूसुहेली दिशा निर्धारित कर सकते हैं

 $(window).on('mousewheel DOMMouseScroll', function (e) { var delta = e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -e.originalEvent.detail; if (delta >= 0) { console.log('scroll up'); } else { console.log('scroll down'); } }); 

मैंने यहां अच्छे उत्तर के कई संस्करण देखे हैं लेकिन ऐसा लगता है कि कुछ लोगों के पास क्रॉस ब्राउज़र मुद्दे हैं, इसलिए यह मेरा ठीक है

मैंने इसे सफलतापूर्वक एफएफ, आईई और क्रोम में दिशा का पता लगाने के लिए उपयोग किया है … मैंने इसे सफारी में परीक्षण नहीं किया है क्योंकि मैं आमतौर पर विंडोज़ का उपयोग करता हूं।

 $("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': function(e) { if (e.target.id == 'el') return; e.preventDefault(); e.stopPropagation(); //Determine Direction if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) { //Up alert("up"); } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) { //Up alert("up"); } else { //Down alert("down"); } } }); 

ध्यान रखें कि मैं इसका उपयोग किसी भी स्क्रॉलिंग को रोकने के लिए भी करता हूं ताकि आप स्क्रॉल करना चाहते हों, तो आपको e.preventDefault(); e.stopPropagation();e.preventDefault(); e.stopPropagation(); हटा देना चाहिए e.preventDefault(); e.stopPropagation(); e.preventDefault(); e.stopPropagation();

स्क्रॉल दिशा खोजने के लिए इसका उपयोग करें। यह केवल कार्यक्षेत्र स्क्रॉल की दिशा खोजने के लिए है सभी क्रॉस ब्राउज़र का समर्थन करता है

  var scrollableElement = document.getElementById('scrollableElement'); scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers); function findScrollDirectionOtherBrowsers(event){ var delta; if (event.wheelDelta){ delta = event.wheelDelta; }else{ delta = -1 * event.deltaY; } if (delta < 0){ console.log("DOWN"); }else if (delta > 0){ console.log("UP"); } } 

उदाहरण

तत्व की .data () के .data () में एक वेतन वृद्धि शेयर करें, तब आप स्क्रॉल शीर्ष पर पहुंचे कई बार परीक्षण करने में सक्षम होंगे।

लोचदार स्क्रॉलिंग के साथ समस्या वाले लोगों के लिए, कृपया इस उत्तर का उपयोग करें

कैसे स्क्रॉल दिशा का पता लगाने के लिए

तत्व के .data() में आप ईवेंट लॉन्च करने के लिए एक JSON और परीक्षण मान संग्रहीत कर सकते हैं

 { top : 1, first_top_event: function(){ ...}, second_top_event: function(){ ...}, third_top_event: function(){ ...}, scroll_down_event1: function(){ ...}, scroll_down_event2: function(){ ...} } 

यह मदद कर सकता है

 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> <script type='text/javascript'> $(function(){ //Keep track of last scroll var lastScroll = 0; $(window).scroll(function(event){ //Sets the current scroll position var st = $(this).scrollTop(); //Determines up-or-down scrolling if (st > lastScroll){ //alert("DOWN"); $('#bg').text('DOWN') } else { //alert("UP"); $('#bg').text('UP') } //Updates scroll position lastScroll = st; }); }); </script> </head> <body> <h1 id="bg">Scroll Here</h1> </body> </html> 

यह सरल और आसान पता लगाना है जब उपयोगकर्ता पृष्ठ के शीर्ष से दूर स्क्रॉल करता है और जब वे शीर्ष पर लौटते हैं

 $(window).scroll(function() { if($(window).scrollTop() > 0) { // User has scrolled } else { // User at top of page } }); 

यह दिशा का पता लगाने के लिए इष्टतम समाधान है, जब उपयोगकर्ता अंत स्क्रॉल करना।

 var currentScrollTop = 0 ; $(window).bind('scroll', function () { scrollTop = $(this).scrollTop(); clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { if(scrollTop > currentScrollTop){ // downscroll code $('.mfb-component--bl').addClass('mfbHide'); }else{ // upscroll code $('.mfb-component--bl').removeClass('mfbHide'); } currentScrollTop = scrollTop; }, 250)); }); 

इसे सुपर सरल रखें:

jQuery इवेंट श्रोता मार्ग:

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

वेनिला जावास्क्रिप्ट इवेंट श्रोता मार्ग:

 if(window.addEventListener){ addEventListener('wheel', whichDirection, false); } else if (window.attachEvent) { attachEvent('wheel', whichDirection, false); } 

फ़ंक्शन के समान रहता है:

 function whichDirection(event){ console.log(event + ' WheelEvent has all kinds of good stuff to work with'); var scrollDirection = event.deltaY; if(scrollDirection === 1){ console.log('meet me at the club, going down', scrollDirection); } else if(scrollDirection === -1) { console.log('Going up, on a tuesday', scrollDirection); } } 

मैंने इसके बारे में और अधिक गहरा लिखा था

आप स्क्रॉल और माउसवील विकल्प दोनों को एक बार में ऊपर और नीचे की गति को ट्रैक करने के लिए उपयोग कर सकते हैं

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

आप 'विंडो' को (विंडो) के साथ भी बदल सकते हैं

आपको यह प्रयास करना चाहिए

 var scrl $(window).scroll(function(){ if($(window).scrollTop() < scrl){ //some code while previous scroll }else{ if($(window).scrollTop() > 200){ //scroll while downward }else{//scroll while downward after some specific height } } scrl = $(window).scrollTop(); });