Tiaw Tiaw - 4 months ago 14
jQuery Question

Scroll function doesn't work on firefox

i made an increment class function on a li list on mousewheel event, it's working well on Chrome and Safari but on firefox the function only scroll down i can't scroll back. How can i fix it?
this is my actual 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

Firefox doesn't have the wheelDelta property, so the line

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

line will always return false, and the code that does the scroll-up is inside that if statement.

In Firefox you can use the wheel event, which have the deltaY property (also standard in Chrome 31 [2013]).

This change to your if statement will fix your problem:

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

According to the MDN, the deltaY property is compatible in latest versions of chrome and firefox and also in 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>

Comments