Add smooth scrolling

[Prinzhorn]

Firefox has this smooth scrolling thingy which makes the use of CSS transitions useless using skrollr in Firefox.

skrollr should get a new option smoothScrolling which interpolates the scoll offset. I guess it can be done in like 100 bytes of code.

It would be a nice to have if in browsers with smooth scrolling enabled the option could be ignored http://stackoverflow.com/questions/11897688/detect-smoth-scrolling-in-firefox-using-javascript

[Prinzhorn]

Aw no...unit testing will probably be a hell of a pain...

[Prinzhorn]

After further investigation, this may be harder as we thought. But I just had the following idea:

Create a hidden element with the same scroll height as the body and give focus to it. When the user scroll, he actually scrolls the hidden element and we can animate the position of the body to the new position.

This could be a skrollr.smooth plugin.

[Prinzhorn]

The hidden element idea doesn't work, because the browser prioritizes the element where the pointer is on, not the one that has the focused element.

For statically positioned elements (those that move directly with the scrollbar) smooth scrolling can probably only be done correctly on a browser or operating system level.

But for things like rotation, movement etc. which skrollr controls, it can still be done by interpolation at a render level. This is what the CSS transitions are currently doing for us but what is leaving IE behind.

[Prinzhorn]

Smooth scrolling is now implemented via smoothScrolling option. It's working in IE and the results are better than CSS transitions because they are dumb (for example when an object moves back and forth, CSS transitions will render it static in worst case. Smooth scrolling will make it move back and forth).

[zackarychapple]

I am having the jumpiness and tried using the smooth scrolling but that did not seem to fix the issue. Am I doing something wrong? Here is a jsbin without the smoothScrolling and one with. Both are jumpy.
Without
http://jsbin.com/ibATAbA/4
With
http://jsbin.com/ibATAbA/5/

[Prinzhorn]

What's this? It's valid js but doesn't make any sense semanticallly.

var s = skrollr.init([
    smoothScrolling=true
    ]);

correct

var s = skrollr.init({
    smoothScrolling: true
});

it's true by default though. So you probably want smoothScrolling: false

[zackarychapple]

Even with it being set to false it is still very jumpy in FF.

http://jsbin.com/eniwoMa/2

[Prinzhorn]

The reason lies in the way skrollr is designed. Skrollr changes the styles after you have scrolled. This means the element moves down due to scrolling and then, some time later, it moves further down due to top animation.

For what you want to achieve you're probably better off positioning the element fixed.