Feature request - add option: auto scroll on mouse wheel

[Volderr]

This is not a bug, but a feature request.

I see you have added option.direction in v. 1.3.2
This is great, because I needed it (only horizontal) for my project. So finally I have reached this by using CSS and giving freedom for the element to scroll only horizontally.

So if such a parameter you have added - I think it would be great to have the following (actually this is what was asked by many people in my project and I was planning to try and implement it myself):

add parameters:
{
mousescroll: true, //by default false
mousescrollspeed: 1 //possible values e.g. 1, 2, 3, by default 1
}

so what this all about?
When you hover over the container with cursor and scroll the mouse wheel - the elements inside should move with "iphone after effect", as if you use drag'n'drop.

if direction is 'auto' or 'vertical' - then mouse wheel up and down would result in elements move up and down.
if direction is 'horizontal' - then mouse wheel down = elements inside container move to the left, and vice versa: mouse wheel up - elements to the right.

mousescrollspeed - would define the initial impulse of the event - the bigger value - the more distance after 1 mouse wheel scroll should the elements move.

[azoff]

Hey Volderr,

Actually scroll wheel support has been in overscroll since v1.2! However, scrolling horizontally (via a multi-directional scroll wheel) is not something I can detect (as far as I am aware) via modern JavaScript. That being said, I just added the ability to control scroll and wheel magnitude in 1.3.3, so at least you get something!

[Volderr]

Probably, I was not very clear. I was not talking about "multi-dimensional" wheel scroll, but about the ordinary mouse with 1 wheel and just up and down scrolls of this wheel.

The feature I was talking about - is change the mousewheel direction, when you put option.direction = 'horizontal'

So that you scroll mouse DOWN (while hovered over) and content is moving to the LEFT.

Actually in the function WHEEL - when direction == horizontal we need to use instead of:
event.data.target.scrollTop(event.data.target.scrollTop() - (delta * event.data.options.wheelDelta));

the following:
event.data.target.scrollLeft(event.data.target.scrollLeft() + (delta * event.data.options.wheelDelta));

so you scroll vertically - but the container moves horizontally.

The problem is adding kind of easing effect after the event, so that speed of the elements movement reduced gradually.

I think it's possible with javascript, but I don't have enough knowledge yet how to implement it.
Maybe you could help on this? I was suggesting to add it as a parameter.

[azoff]

Ahh I see what it is you want, essentially it comes down to two features:

• The ability to change the default mouse wheel direction
• The ability to drift at the end of a mouse wheel scroll

The first should be really simple, the second might take some time. I'll keep you updated.

[Volderr]

Great, thanks.

By the way - the mouse scroll vertical event now is behaving in a contrary to normal way.

When I scroll wheel down - the map of SF on your demo is moving up (but the normal behavior - it should be scrolled down as well, e.g. like an ordinary page). So I think you better change "-" to "+" there in the code.

[azoff]

Cool, thanks for the bug report.

I have added the wheel scroll direction and fixed the bug in 1.3.5

However, the drift functionality on scroll wheel just isn't possible with the events I have access to. In order to a drift I need wheelstart, wheelchange, and wheelend events. That is how I do the calculation for the drift so without it it won't work.

[Volderr]

In order to a drift I need wheelstart, wheelchange, and wheelend events.

I was thinking about this, and I think it could be done without these events.

When the mouse wheel is scrolled now - the content is kind of doing an immediate jump. Then if you you do consequently another scroll - then content is jumping again.

So is it possible after every scroll - first do the "jump" which is now implemented in WHEEL function, but then immediately start the drift/easing in the same direction as the scroll has been. The speed of drift could be dependant on option.wheelDelta parameter. The bigger value the longer the content of the container should be stopping.

So when you do several scrolls with mouse wheel at a time should happen the following:
after the first mouse scroll (you call it 'tick') you do the jump and start drifting. But if the next scroll occurs when the element has not yet stopped - then we need to eliminate any drifting and do the jump in the needed direction and then again start drifting.

So if the mouse wheel is doing 3 scrolls at a time - you will see 3 jumps and then after the last jump the easing out effect would happen.
Actually this easing effect would occur between 1-2 and 2-3 scrolls, but as we do the next scroll immediately - we are stopping the motion and doing the next jump + after motion effect.

Hope I gave the idea clearly. What do you think, is it possible to be implemented?

[Volderr]

I have found another way of detecting mouse wheel stop event. Here:
http://stackoverflow.com/questions/3515446/jquery-mousewheel-detecting-when-the-wheel-stops

there is an example present http://jsfiddle.net/nick_craver/NpdkG/

PS
Ahhh, thought again - probably this is not what is needed, as the easing effect should occur immediately, but not after 250ms or other interval, so the startegy in the previous post should work.

[azoff]

Ya so I actually already tried the first way of getting the drift to work by animating at the end of every tick, the problem is that starting and stopping the animation makes the scroll seem very jerky. In addition, there are already mice and programs you can buy to make your scroll wheel have a drift so adding a drift from the plugin side is redundant. As to the second post you made, you are right, waiting any amount of time before the drift makes the process seem unnatural - the drift has to occur at the end of the scroll.

[Volderr]

ok, I see.

In addition, there are already mice and programs you can buy to make your scroll wheel have a drift so adding a drift from the plugin side is redundant.

you mean programs to make mouse scroll easing on your computer only? Actually, I wanted to make this effect available on my web site, so ordinary users could use it w/o any additional devices/stuff.
It's a pitty, but I think we could live without it.
BTW the version you made (you said jerky behavior) - could you send it ([email protected]) without updating here? Maybe this 'jerky' is not so jerky really :)

Anyway, thanks for the great plugin.

[azoff]

Ya, I could definitely make a custom version. What I'll probably do is fork the code off master, add you as a contributer, and make the change in the branch. At least that way other people with the same need can benefit. I'll keep you updated and let you know when I can get a branch ready.