JQuery में माउस व्हील इवेंट प्राप्त करें?

Question

क्या scrolljQuery में माउस व्हील इवेंट ( घटनाओं के बारे में बात नहीं करना ) प्राप्त करने का एक तरीका है ?

Comments

एक त्वरित खोज ने इस प्लगइन को बदल दिया जो मदद कर सकता है।

— जेरद रोज

यह समाधान मेरे लिए काम करता है: stackoverflow.com/questions/7154967/jquery-detect-scrolldown

— bertie

@thejh ने DOM3 घटनाओं के साथ इस पर एक नया उत्तर पोस्ट किया: stackoverflow.com/a/24707712/2256325

— सर्जियो

JQuery स्क्रॉल के

— दिव्य 3993

बस इस पर ध्यान दें। यदि आप किसी इनपुट में परिवर्तन का पता लगाना चाहते हैं, और यह माउस व्हील के माध्यम से परिवर्तनों का पता नहीं लगा रहा है, तो कोशिश करें$(el).on('input', ...

— rybo111

Answer 1

एक प्लगइन है जो एक क्षेत्र पर माउस व्हील और वेग का पता लगाता है।

Comments

लगाना? चलो .. नीचे दिए गए उत्तर की जांच करें आप इसे बिना कर सकते हैं

Answer 2

​$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});

Comments

DOMMouseScrollघटना, एफएफ में प्रयोग किया जाता है, ताकि आप दोनों पर सुनने के लिए है .bind('DOMMouseScroll mousewheel') {evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...

— mrzmyr

e.originalEvent.wheelDeltaFF23 में अपरिभाषित है

— hofnarwillie

आपको 120 से विभाजित करने की आवश्यकता नहीं है, यह व्यर्थ है cpu की बेकार

— venimus

सबसे अच्छा जवाब दिया गया होगा

लेकिन वैसे भी, आप इसे 120 से क्यों विभाजित करना चाहेंगे? वह निरंतर क्या है? (आप के लिए नहीं है, के रूप में venimus बाहर बताया।)

— mshthn

Answer 3

दोनों के लिए बाध्यकारी mousewheelऔर DOMMouseScrollमेरे लिए वास्तव में अच्छी तरह से काम करना समाप्त हो गया:

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
        // scroll down
    }
});

यह विधि IE9 +, क्रोम 33 और फ़ायरफ़ॉक्स 27 में काम कर रही है।

---

संपादन - मार्च २०१६

मैंने इस मुद्दे पर फिर से विचार करने का फैसला किया क्योंकि यह कुछ समय के लिए है। स्क्रॉल इवेंट के लिए MDN पृष्ठ में स्क्रॉल स्थिति को पुनः प्राप्त करने का एक शानदार तरीका है requestAnimationFrame, जो मेरे उपयोग का पता लगाता है, जो कि मेरी पहचान विधि के लिए अत्यधिक बेहतर है। मैंने स्क्रॉल दिशा और स्थिति के अलावा बेहतर संगतता प्रदान करने के लिए उनके कोड को संशोधित किया:

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

कोडपे पर जेसी डुप्यु ( @ blindside85 ) द्वारा पेन वेनिला जेएस स्क्रॉल ट्रैकिंग देखें ।

यह कोड वर्तमान में काम कर रहा है Chrome v50, Firefox v44, Safari v9, and IE9+

संदर्भ:

• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Comments

यह मेरे लिए सबसे अच्छा काम किया। हालाँकि, यह स्क्रिप्ट स्क्रॉल व्हील के "क्लिक" पर चलती है। यह कुछ स्क्रिप्ट का उपयोग करने के लिए भारी हो सकता है। क्या स्क्रोल व्हील प्रति स्क्रिप्ट चलाने के बजाय प्रत्येक स्क्रॉल ईवेंट को एक उदाहरण के रूप में माना जाता है?

— invot

विशेष रूप से नहीं। मैंने जो देखा है, उससे बहुत से लोग या तो स्क्रॉल ट्रैकिंग से निपटने से बचेंगे, या वे इसके बजाय एक टाइमर का उपयोग करेंगे (उदाहरण के लिए पृष्ठ पर उपयोगकर्ता की स्थिति हर x मिलीसेकंड, आदि की जांच करें)। अगर वहाँ एक और अधिक उपयोगी समाधान है, मैं निश्चित रूप से इसके बारे में जानना चाहता हूँ!

— जेसी डुप्युई

मुझे ऐसा करने का एक तरीका मिला: stackoverflow.com/questions/23919035/…

— invot

अद्यतन के लिए धन्यवाद। क्या आप अपने जवाब में अपना कोड कॉपी कर सकते हैं? कभी नहीं पता कि किसी दिन कोडपेन नीचे जा सकता है। यह पहले हुआ है।

— JDB आज भी

@JesseDupuy, मैं इस उत्तर को अपवित्र करूंगा, लेकिन यदि दस्तावेज़ में दृश्य फिट हो ("चौड़ाई: 100vh; ऊँचाई: 100vh") तो आपके अपडेट किए गए संस्करण doesn `t काम करते हैं या उन्हें" अतिप्रवाह: छिपा हुआ; "मिला है। "window.addEventListener ('स्क्रॉल', कॉलबैक)" "window.addEventListener ('mousewheel', callback) का सही उत्तर नहीं है।

— डेनियल

Answer 4

अब 2017 में, आप लिख सकते हैं

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

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
  if(event.originalEvent.deltaY < 0){
    // wheeled up
  }
  else {
    // wheeled down
  }
});

वर्तमान फ़ायरफ़ॉक्स 51, क्रोम 56, IE9 + के साथ काम करता है

Answer 5

"मूसव्हील" घटना के बारे में बात करने वाले उत्तर एक पदावनत घटना का उल्लेख कर रहे हैं। मानक घटना बस "पहिया" है। Https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel देखें

Comments

मैंने इन्हें आजमाया और पाया: "पहिया" फ़ायरफ़ॉक्स और IE में काम करता है लेकिन क्रोम नहीं। "mousewheel" क्रोम और IE में काम करता है लेकिन फ़ायरफ़ॉक्स नहीं। "DOMMouseScroll" फ़ायरफ़ॉक्स में ही काम करता है।

— कर्टिस येलोप

वाह, इससे मेरा बहुत समय बच गया। धन्यवाद!

— gustavohenke

लगता है कि 2013 के अगस्त में क्रोम ने "पहिया" के लिए समर्थन जोड़ा: code.google.com/p/chromium/issues/detail?id=227454

— rstackhouse

सफारी अभी भी पहिया घटना का समर्थन नहीं करता है।

— Thayne

अपने दस्तावेज़ कहते हैं, wheelघटना पर समर्थित है Edge नहीं IEजो एक ही बात नहीं है। कैन्यूस

— एलेक्स

Answer 6

यह मेरे लिए काम :)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

स्टैकओवरफ्लो से

Answer 7

यहाँ एक वेनिला समाधान है। JQuery में उपयोग किया जा सकता है अगर फ़ंक्शन को दिया गया इवेंट वह है event.originalEventजो jQuery jQuery इवेंट की संपत्ति के रूप में उपलब्ध कराता है। या अगर callbackहम फ़ंक्शन के अंदर पहली पंक्ति से पहले जोड़ते हैं:event = event.originalEvent; :।

यह कोड व्हील की गति / राशि को सामान्य करता है और एक विशिष्ट माउस में आगे स्क्रॉल, और एक पिछड़े हुए पहिया पहिया आंदोलन में नकारात्मक के लिए सकारात्मक होगा।

डेमो: http://jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) {
    wheel.innerHTML = 'wheel ammout: ' + ammout;
}

function callback(event) {
    var normalized;
    if (event.wheelDelta) {
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
    } else {
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    }
    report(normalized);
}

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

JQuery के लिए एक प्लगइन भी है, जो कोड में अधिक क्रिया है और कुछ अतिरिक्त चीनी: https://github.com/brandonaaron/jquery-mousewheel

Answer 8

यह प्रत्येक IE, फ़ायरफ़ॉक्स और क्रोम के नवीनतम संस्करणों में काम कर रहा है।

$(document).ready(function(){
        $('#whole').bind('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                alert("up");
            }
            else{
                alert("down");
            }
        });
    });

Answer 9

मैं आज इस मुद्दे में फंस गया था और पाया कि यह कोड मेरे लिए ठीक काम कर रहा है

$('#content').on('mousewheel', function(event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) {
      console.log('scroll up');
    } else {
      console.log('scroll down');
    }
});

Answer 10

इस कोड का उपयोग करें

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});

Answer 11

मेरा संयोजन इस तरह दिखता है। यह नीचे स्क्रॉल करता है और प्रत्येक को नीचे / ऊपर स्क्रॉल करता है। अन्यथा आपको हेडर को फ़ेड करने के लिए हेडर तक स्क्रॉल करना होगा।

var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta > 0) {
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    else{
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    }
});

ऊपर एक स्पर्श / मोबाइल के लिए अनुकूलित नहीं है, मुझे लगता है कि यह सभी मोबाइल के लिए बेहतर है:

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {

    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

    } else {
        //Scrolling Up
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    iScrollPos = iCurScrollPos;

});

Answer 12

@DarinDimitrov ने जो प्लगइन पोस्ट किया है jquery-mousewheel, वह jQuery 3+ के साथ टूट गया है । यह उपयोग करने के लिए अधिक उचित होगा jquery-wheelजो jQuery 3+ के साथ काम करता है।

यदि आप jQuery मार्ग पर नहीं जाना चाहते हैं, तो एमडीएन इस mousewheelघटना का उपयोग करते हुए अत्यधिक सावधानी बरतता है क्योंकि यह कई स्थानों पर गैर-मानक और असमर्थित है। इसके बजाय यह कहता है कि आपको इस wheelघटना का उपयोग करना चाहिए क्योंकि आप वास्तव में उन मूल्यों के बारे में अधिक विशिष्टता प्राप्त करते हैं जो आपको मिल रहे हैं। यह सबसे प्रमुख ब्राउज़रों द्वारा समर्थित है।

Answer 13

यदि उल्लेख jquery mousewheel प्लगइन का उपयोग कर रहा है , तो इवेंट हैंडलर फ़ंक्शन के 2 तर्क का उपयोग करने के बारे में क्या है - delta:

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});

Answer 14

मुझे हाल ही में एक ही समस्या $(window).mousewheelआई थी कि कहाँ लौट रहा थाundefined

मैंने जो किया था $(window).on('mousewheel', function() {});

इसे आगे बढ़ाने के लिए मैं इसका उपयोग कर रहा हूं:

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}

Comments

आपने यह नहीं बताया कि क्या newUtilities.getMouseWheelDirection है

— ccsakuweb

यह इस प्रश्न के दायरे से बाहर है। तो यह कॉपी पेस्ट वेबसाइट नहीं है।

— सिजमन टोडा