Question

I use the scrollTop along with the mousewheel tweak on jQuery to navigate on my website, the problem is: it works (not so bad) with a real mouse : you have to scroll ONE notch to go to second part of the site if you scroll 2 notches it’ll go to page 3 etc..

So when someone uses a laptop to scroll it seems very buggy: it goes straight to the last page of the site.

I’d like to know how to catch several notches of scrolls till the user stops scrolling. Exactly like on this page: neverbland.com

Here’s mine: knmprod.com/knmprod

Answer 1

You could use the mousewheel plugin and a timer to check for when the wheel hasn’t moved for several milliseconds – say 250 – and then execute the page change. This will allow a single page change for each mouse movement, regardless of the speed or type of mouse – same as neverbland.com does:

$('body').mousewheel(function() {
  clearTimeout($(this).data('timer'));
  $(this).data('timer', setTimeout(function() {
     alert('Change Page');
  }, 250));
});

JSFiddle Here

I hope this helps!