滚动功能在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属性在最新版本的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>