滚动功能在Firefox上不起作用

Question

我在mousewheel事件的li列表上做了一个增量类函数，它在Chrome和Safari上运行良好，但是在Firefox上，该函数只能向下滚动而我不能向后滚动。 我该如何解决？ 这是我的实际代码：

 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没有wheelDelta属性，因此该行

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

行将始终返回false ，并且进行向上滚动的代码在if语句内部。

在Firefox中，您可以使用wheel事件，该事件具有deltaY属性（也是Chrome 31 [2013]中的标准事件）。

对if语句的此更改将解决您的问题：

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

根据MDN的deltaY ， deltaY属性在chrome和firefox的最新版本以及IE9中都兼容。

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