disable scroll after each mousewheel event

Question

i made a function that increment a class on a li list, there is my code:

var scrollable = $('ul li').length - 1,
  count = 0;
$('body').bind('mousewheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    if (scrollable >= count && count > 0) {
      $('.active').removeClass('active').prev().addClass('active');
      count--
    } else {
      return false;
    }
  } else {
    if (scrollable > count) {
      $('.active').removeClass('active').next().addClass('active');
      count++
    } else {
      return false;
    }

  }
})

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>

But i want to lock the scroll for 1 seconde between each transition of the class, how can i fix it?

Try setting your `body` to have `overflow:hidden`. You might have to give the entire site a container, then set the container to the scroll height while you set your body to overflow hidden. — ntgCleaner, Jun 29 '16 at 16:40
actually my body is already in overflow hidden, (sorry for the exemple i will fix it) — Thibaud, Jun 29 '16 at 16:44

score 1 · Answer 1 · answered Jun 29 '16 at 16:51

1

Create a flag and use a setTimeout for one second

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

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

    }
    setTimeout(function() {
      allowTransition=true;
    }, 1000);
  }
})

answered Jun 29 '16 at 16:51

Hoyen

2,511
1
12
13

thanks @Hoyen but there is a problem on the come back it isn't working with your solution, if you scroll one more time than the last li – Thibaud Jun 29 '16 at 20:12
@Tiaw my code isn't preventing that. The existing code from you is preventing it from doing anything if you are on the last item and trying to scroll to the next one. – Hoyen Jun 29 '16 at 21:56
actually i can't find how to prevent it with your solution, any idea ? – Thibaud Jun 30 '16 at 17:13

disable scroll after each mousewheel event

1 Answers1