Catch one scroll

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

Isn't the concept of "notches" a little risky? I know I've seen many newer mousewheels that have almost continuous motion and really weakly defined notches. — Chris Farmer, Sep 06 '12 at 22:00
Also, your description of how you want it to act doesn't seem to me like that's what neverbland.com is doing. It seems to be beginning a single one-unit scroll immediately when I move the wheel. No matter how many notches I cover during the time it takes to scroll, I end up at the same destination. I have to move the wheel again after the next slide is displayed in order to initiate a scroll to the next slide. FWIW, Chrome 21.0.1180.83 on Windows 7 here. — Chris Farmer, Sep 06 '12 at 22:12
Every time you blatantly steal a design, a cute kitten dies. Just sayin'. — vzwick, Sep 06 '12 at 22:22

Ariel · Answer 1 · 2012-09-06T22:16:03.887

0

Set a timer every time you get a mousewheel event, every time you get another event cancel the first one.

Only once you stop getting events for some amount of time (say .5 second) then trigger your action.

var timer, longTimer = false, delta;

$('.page').bind('mousewheel', function(e, localDelta) {
  if(!longTimer) longTimer = setInterval(action, 1500);
  clearInterval(timer);
  timer = setInterval(action, 500);
  delta = localDelta;
}

function action() {
  clearInterval(timer);
  clearInterval(longTimer);
  longTimer = false;

  if(delta<0) {
    number=plusone(number);
    goToByScroll(number);
  } else {
    number= minusone(number);
    goToByScroll(number);
  } 
}

edited Sep 06 '12 at 22:16

answered Sep 06 '12 at 22:05

Ariel

25,995
5
59
69

What is "your action" here? Beginning the scroll? – Chris Farmer Sep 06 '12 at 22:07
@ChrisFarmer The action is moving to the next page. i.e. only do that once the wheel stops - but it doesn't matter how far it traveled before doing so - this solves the problem you mentioned about notches. There should probably be a second trigger that if the wheel scrolls continuously for more than 1.5 second, trigger an action anyway. It would be clearer in code probably. – Ariel Sep 06 '12 at 22:12
jQuery(function($) { $('.page').bind('mousewheel', function(event, delta) { if(delta<0){ number=plusone(number); goToByScroll(number); } else{ number= minusone(number); goToByScroll(number); } }); }); – Yass Ben Sep 06 '12 at 22:13
I guess I understand your logic, but waiting half a second to begin to scroll seems a long wait, especially since the act of scrolling in his examples also takes about half a second. – Chris Farmer Sep 06 '12 at 22:14
@ChrisFarmer I'm assuming he would tune the timer after implementing it so see what gives the best feel. I've posted the code above. – Ariel Sep 06 '12 at 22:19
@YassBen Scrolling is on you - edit the action function if I got it wrong. Put an alert in that function so you can be sure it's getting triggered. – Ariel Sep 06 '12 at 22:25
@Ariel ok I got the scrolling workin, but it still does scroll to the end of the page .. – Yass Ben Sep 06 '12 at 22:38

score 0 · Accepted Answer · answered Sep 06 '12 at 22:21

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!

score 0 · Answer 3 · answered Sep 06 '12 at 22:31

0

Does this not work?

$(window).scroll(function(){alert(1)});

http://jsfiddle.net/2hwu9/

answered Sep 06 '12 at 22:31

Steve Robbins

13,672
12
76
124

So you would animate your page 3 times. – Steve Robbins Sep 07 '12 at 18:05

Catch one scroll

3 Answers3