Scroll-Funktion funktioniert nicht auf Firefox

Question

Ich machte eine Inkrement-Klasse-Funktion auf einer Li-Liste am Mausrad Ereignis, es funktioniert gut in Chrome und Safari aber auf Firefox die Funktion nur nach unten scrollen ich kann nicht zurückrollen. Wie kann ich es reparieren? dies ist mein eigentlicher Code:

var scrollable = $('ul li').length - 1, 
 
    count = 0, 
 
    allowTransition = true; 
 
$('body').bind('wheel DOMMouseScroll', function(e) { 
 
    e.preventDefault(); 
 

 
    if (allowTransition) { 
 

 
    allowTransition = false; 
 
    if (e.originalEvent.wheelDelta/120 > 0) { 
 
     if (scrollable >= count && count > 0) { 
 
     $('.active').removeClass('active').prev().addClass('active'); 
 
     count--; 
 
     } else { 
 
     allowTransition = true; 
 
     return false; 
 
     } 
 
    } else { 
 
     if (scrollable > count) { 
 
     $('.active').removeClass('active').next().addClass('active'); 
 

 
     count++; 
 
     } else { 
 
     allowTransition = true; 
 
     return false; 
 
     } 
 
    } 
 
    setTimeout(function() { 
 
     allowTransition = true; 
 
    }, 1000); 
 
    } 
 
})

body { 
 
    overflow: hidden; 
 
} 
 
ul li { 
 
    height: 20px; 
 
    width: 20px; 
 
    background: blue; 
 
    margin: 5px; 
 
    list-style: none 
 
} 
 
ul li.active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li class="active"></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 1

Firefox nicht die wheelDelta Eigenschaft, so dass die Linie

if (e.originalEvent.wheelDelta/120 > 0) {` 

Linie immer false zurückkehren wird, und der Code, der tut Das Scroll-Up ist innerhalb dieser if Aussage.

In Firefox können Sie die wheel Ereignis verwenden, die die deltaY Eigenschaft haben (auch Standard in Chrome 31 [2013]).

Diese Änderung Ihrer if Anweisung wird Ihr Problem beheben:

if (e.originalEvent.wheelDelta/120 > 0 || e.originalEvent.deltaY < 0) { 

Nach den MDN, die deltaY Eigenschaft in aktuellen Versionen von Chrome und Firefox und auch in IE9 kompatibel ist.

$(function(){ 
 
    var scrollable = $('ul li').length - 1, 
 
     count = 0, 
 
     allowTransition = true; 
 
    $('body').bind('wheel', function(e) { 
 
     e.preventDefault(); 
 

 
     if (allowTransition) { 
 

 
     allowTransition = false; 
 
     if (e.originalEvent.wheelDelta/120 > 0 || e.originalEvent.deltaY < 0) { 
 
      if (scrollable >= count && count > 0) { 
 
      $('.active').removeClass('active').prev().addClass('active'); 
 
      count--; 
 
      } else { 
 
      allowTransition = true; 
 
      return false; 
 
      } 
 
     } else { 
 
      if (scrollable > count) { 
 
      $('.active').removeClass('active').next().addClass('active'); 
 

 
      count++; 
 
      } else { 
 
      allowTransition = true; 
 
      return false; 
 
      } 
 
     } 
 
     setTimeout(function() { 
 
      allowTransition = true; 
 
     }, 1000); 
 
     } 
 
    }); 
 
});

body { 
 
    overflow: hidden; 
 
} 
 
ul li { 
 
    height: 20px; 
 
    width: 20px; 
 
    background: blue; 
 
    margin: 5px; 
 
    list-style: none 
 
} 
 
ul li.active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li class="active"></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>