How stop scrollTo on user scroll?

JavaScript
1

My new project is a single page portfolio website. I use the jQuery scrollTo plugin to scroll my page on navigation link click. The problem is that if the user starts trying to scroll the page while the plugin is scrolling the page, they start to fight with each other.

I’m looking for a way to either stop automatic page scrolling by scrollTo when the user starts scrolling the page or to disable user scrolling until the page finishes scrolling itself. I’ve found code that lets me detect scrolling and stop scrolling, but it includes scrolling by the plugin in a scroll() event. You can see that code here:

	$(".navigation a").click(function(){
		var slow = 4500;
		var normal = 2500;
		var fast = 1700;
		$.scrollTo($(this).attr('href'), eval($(this).attr('rel')),{easing:'easeInOutQuint'});
		return false;
	});
	$(window).scroll(function(){
		$.scrollTo.window().queue([]).stop();
	});

I’m mostly looking for a way to distinguish user scrolling from plugin scrolling so that I can make one of the two stop when the other starts.

You can see what’s going on here:
http://code-junkie.com/wp/

If anyone knows how to do what I’m trying to do, please let me know. Thanks in advance!

2

I’m mostly looking for a way to distinguish user scrolling from plugin scrolling so that I can make one of the two stop when the other starts.
It should be that when the user scrolls, the automatic scrolling stops. User action should always supercede your code’s actions.

The other option is moot, since it’s impossible for the page to automatically start to scroll if the user is in the middle of scrolling (since triggering the auto-scroll is via a click event).

Therefore I can’t see what’s wrong with what you’ve got above, except for the horrid eval(), which you’ve addressed in another thread.

3

Well the problem is that it doesn’t automatically stop when the user starts scrolling. Is the plugin already supposed to be doing this by default? It hasn’t been doing so in my code. If, for example you start scrolling up after you click a link that tells the page to scroll down then the page will start jittering until scrollTo gets to finish scrolling.

What I’m looking for is a way to make the page stop scrolling itself if the user starts scrolling manually. If I use the code I referenced above though, it counts what scrollTo is doing as a scroll() event and stops it before the user has done anything. Because scrollTo is incremental, I also probably can’t tell it to listen for a scroll event once it’s started scrolling and then stop on scroll() because then it will just wait for the next incremental scroll and stop scrolling.

If I can distinguish a user interaction scroll from a regular scroll() event, then I can tell it to stop scrolling once when the user starts scrolling and give them control back.

4

You could monitor mousewheel scrolling and keypresses and set a variable when the page starts automatically scrolling. Then when someone scrolls the mouse or presses a monitored key, reset the variable’s value and stop scrolling.

There is a Mousewheel plugin you could use to easily deal with detecting mousewheel events.

To monitor keypresses you can uses the built in jQuery keypress events and the following Keycodes reference to see which keycodes you’ll need to use. I would advise monitoring the arrow keys and the pageup/pagedown keys.

You should be aware that you are leaving out the fact that someone could be using the scrollbar though :wink: