滚动功能在火狐浏览器上不起作用

Scroll function doesn't work on firefox

本文关键字：不起作用 火狐浏览器 功能 滚动      更新时间：2023-09-26

我在鼠标滚轮事件的 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>

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>

相关文章：