फ़ायरफ़ॉक्स + jQuery माउसव्हील स्क्रॉल घटना बग

Question

अद्यतन कार्य ठीक के रूप में डेविड ने सुझाव दिया (देखें नीचे):

की जगह

$('.scrollMe').bind("mousewheel DOMMouseScroll", ...) 

$('.scrollMe').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...) 

मूल पोस्ट के साथ

फ़ायरफ़ॉक्स 16.0.2 (नवीनतम) "mousewheel/DOMMouseScroll" ईवेंट बाध्य करते समय एक समस्या दिखाता है। माउस पॉइंटर मेरे लक्षित div के शीर्ष पर होने पर मूसहेल के साथ स्क्रॉल करना विंडो को स्क्रॉल करने का कारण बनता है- जबकि मैं स्पष्ट रूप से यह नहीं चाहता हूं।

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

Javascript कोड:

$(document).ready(function() { 
      $('.scrollMe').bind("mousewheel DOMMouseScroll", function(e) { 
       e.stopImmediatePropagation(); 
       e.stopPropagation(); 
       e.preventDefault(); 

       var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail); 

       $(this).empty();  
       return false; 
      }); 
    }); 

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

jsFiddle Code example

विचित्र कि फ़ायरफ़ॉक्स एक बार आप बाध्य तत्व पर ईवेंट को सक्रिय व्यवहार दोहराया नहीं जाता है, जिसका अर्थ यह पेज स्क्रॉल करना बंद कर देता है। हालांकि, बाद में पृष्ठ को मैन्युअल रूप से स्क्रॉल करने के बाद यह फिर से व्यवहार करता है और पुनः प्रयास करें।

मैंने आईई 9 और क्रोम में भी इसका परीक्षण किया है लेकिन उन समस्याओं में इस समस्या का पता नहीं लगा सका (जिसका अर्थ है कि वे अनपेक्षित रूप से विंडो को स्क्रॉल नहीं करते हैं), इसलिए मैं अनुमान लगा रहा हूं कि यह फ़ायरफ़ॉक्स-विशिष्ट है (प्रत्येक प्लगइन को अक्षम भी फ़ायरफ़ॉक्स आदि में)

क्या यह वास्तव में फ़ायरफ़ॉक्स में एक बग है (और यदि ऐसा कोई क्रॉस-ब्राउज़र हैक है जो चाल कर सकता है)? या, यदि आप पेज की विंडो स्क्रॉल के बिना मूसहेल घटना को पकड़ने के समान प्रभाव को प्राप्त करने के किसी भी अन्य समाधान के बारे में जानते हैं, तो कृपया उत्तर देने के लिए स्वतंत्र महसूस करें!

Answer 1

मैं टच पैड (फिल्ड ठीक काम करता है) का उपयोग करके अपने एफएफ 16.01 ओएसएक्स में इस बग को पुन: पेश नहीं कर सकता, लेकिन मुझे पता है कि MozMousePixelScroll नामक एक और मोज़िला-विशिष्ट घटना है। आप इसे भी शामिल करने की कोशिश कर सकते हैं।

वहाँ MDN में भी अधिक जानकारी के लाभ है: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

एक sidenote के रूप में, मैं डिफ़ॉल्ट कार्रवाई e.preventDefault() का उपयोग कर पर्याप्त होना चाहिए रोक लगता है, propagations रूप में अच्छी तरह बंद करने के लिए (जब तक वहाँ अन्य आईई विशिष्ट कीड़े हैं की कोई जरूरत नहीं)।

Answer 2

पढ़ना https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll ऐसा लगता है कि मोज़ाउसउस पिक्सेलस्क्रॉल डोममोउसस्क्रॉल 16 या उससे पहले फ़ायरफ़ॉक्स के लिए था। फ़ायरफ़ॉक्स के लिए> 17 wheel ईवेंट का उपयोग करें।

$(document).ready(function() { 
     $('.scrollMe').bind("wheel mousewheel", function(e) { 
      e.preventDefault(); 

      var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail); 

      $(this).empty();  
      return false; 
     }); 
}); 

Answer 3

इस प्रश्न पर यह जवाब है, है अधिकांश ब्राउज़र संगत समाधान मैं पाया है:

How to detect scroll direction

$('#elem').on('DOMMouseScroll mousewheel', function (event) { 
    if(event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY 
     //scroll down 
     console.log('Down'); 
     } else { 
     //scroll up 
     console.log('Up'); 
     } 
     //prevent page fom scrolling 
     return false; 
    }); 

Answer 4

इस उत्तर Chrome, Firefox और iexplorer

पर एक crossbrowsing समाधान है

var handlerMousewheel = function(){ 
 
\t \t $(".item").on("wheel mousewheel", function(event) { 
 
\t \t \t event.preventDefault(); 
 
\t \t \t \t var deltaY = event.originalEvent.deltaY; 
 
\t \t \t \t var wheelDeltaY = event.originalEvent.wheelDeltaY; 
 

 
\t \t \t \t if(deltaY == 100 && wheelDeltaY == -120 || deltaY > 0 && wheelDeltaY == undefined) { 
 
\t \t \t  \t \t $(".wrapper").animate({"margin-left":"0%"},{duration:100}); 
 
\t \t \t \t }else if(deltaY == -100 && wheelDeltaY == 120 || deltaY < 0 && wheelDeltaY == undefined){ 
 
\t \t \t  $(".wrapper").animate({"margin-left":"50%"},{duration:100}); 
 
\t \t \t \t } 
 
\t 
 
\t \t }); 
 
\t } 
 
    handlerMousewheel();

.container{ 
 
    display:block; 
 
    width:100%; 
 
    height:200px; 
 
    overflow-x:hidden; 
 
    overflow-y:scroll; 
 
    background-color: grey; 
 
} 
 
.wrapper{ 
 
    display:block; 
 
    overflow:hidden; 
 
    background-color:#a3cfef; 
 
    padding: 2%; 
 
    width:50%; 
 
    margin:0 auto; 
 
} 
 
.item{ 
 
    width:100%; 
 
    height:50px; 
 
    margin:2px 0; 
 
    display:block; 
 
    overflow:hidden; 
 
    border:3px solid #ad08a6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="item"></div>  
 
    <div class="item"></div>  
 
    <div class="item"></div>  
 
    <div class="item"></div>  
 
    <div class="item"></div>  
 
    <div class="item"></div>  
 
    <div class="item"></div>  
 
    </div> 
 
</div>

https://jsfiddle.net/rrubio/ncLjgwy0/