firefox + jQuery Fare tekerleğinin kaydırma David tarafından önerildiği gibi düzeltmeyi Çalışma olay hata

Question

GÜNCELLEME (aşağıya bakınız):

yerine

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

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

ORİJİNAL POST ile

Firefox 16.0.2 (en son), "mousewheel/DOMMouseScroll" olayını bağlarken bir sorun olduğunu gösteriyor. Fare işaretçisi hedefli div'umun üstündeyken fare tekerleği ile kaydırma yapmak, pencerenin de kaydırma yapmasına neden olur; oysa bunu istemiyorum.

Yayılmasını vb. Durdurmak için birkaç yöntem eklemeyi denedim, ancak hiçbir şey işe yaramıyor gibi görünüyor.

Javascript kodu:

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

eylem olarak görmek için aşağıdaki jsFiddle bağlantıyı takip edin. Örnek sayfada, fare imlecini divun içine kırmızı kutularla yerleştirin ve farenizin kaydırma tekerini kullanın. Firefox, diğer tarayıcıların yapmadığı sırada ana pencereyi ilk kez (beklenmedik bir şekilde) kaydırır.

jsFiddle Code example

Özgü size bağlı elemana olayı bir kez Firefox yeniden sayfayı kaydırma durur, yani davranışı tekrarlamak olmamasıdır. Ancak, sayfayı daha sonra el ile sonra kaydırdıktan sonra yeniden deneyin.

Bunu IE9 ve Chrome'da da test ettim, ancak bu sorunu tarayıcılarda (yani pencereyi beklenmedik bir şekilde kaydırmamaları) algılayamadım, bu yüzden Firefox'a özgü olduğunu tahmin ediyorum (ayrıca her eklenti devre dışı bırakıldı) firefox vb.)

Bu gerçekten bir firefox'ta bir hata mıdır (ve eğer işe yarayacak bir çapraz tarayıcı hack varsa)? Ya da, sayfanın pencere kaydırma olmadan mousewheel olayı yakalamak aynı etkiyi elde etmek için başka bir çözüm biliyorsanız, lütfen cevaplamaktan çekinmeyin!

Answer 1

I (Keman çalışıyor) dokunmatik takımını kullanarak benim FF 16.01 OSX bu hata yeniden edemez, ama başka mozilla özgü bir olay MozMousePixelScroll denilen olduğunu biliyoruz. Bunu da dahil etmek isteyebilirsiniz.

MDN'yi altında da daha bilgi boşuna yok: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

Bir not olarak, ben yeterli olacaktır e.preventDefault() kullanarak varsayılan eylemi durdurma düşünüyorum, diğer IE özgü hatalar olmadığı sürece (aynı zamanda propagations durdurmaya gerek).

Answer 2

Okuma https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll MozMousePixelScroll DOMMouseScroll, firefox 16 veya daha önceki sürümler için yapıldı. Firefox için> 17 wheel olayını kullanın.

$(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

bu soru üzerine Bu cevap, çoğu tarayıcı uyumlu çözüm buldum etti:

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

Bu cevap Chrome, Firefox ve IEXPLORER

bir crossbrowsing çözümdür

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/