non-linear scrolling

Question

Scrolling s is like, well, linear:

s(x) = x             with x among [0, ∞]

I'd like to apply a more fancy function, say x^2:

but I'd don't really know if it's possible and how...

I'd like to know your thougts on this.

EDIT

For example: is it possible to change the scrollTop value while scrolling?

Cheers.

Answer 1

A high level approach to your problem:

1. Capture scroll events, keep track of the time you got the last one

2. Compute actual velocity vA based on time to last event

   vA(dT):
       // if we last scrolled a long time ago, pretend it was MinTime
       // MinTime is the dT which, when scrolled
       // at or less than, behaves linearly
   
       if (dT > MinTime) dT = MinTime
       vA = MinTime / dT
   

3. Devise some transformation to perform on vA to get desired velocity vD:

   vD(vA):
       // quadratic relationship
       vD = vA * vA 
   

4. Calculate a "scroll factor" fS, the ratio of vD to vA:

   fS(vD, vA):
       // this step can be merged with the previous one
       fS = vD / vA 
   

5. Calculate the delta scroll dS using fS and dSi, the initial scroll size (1 scroll event's worth of scrolling)

   dS(fS):
       dS = fS * dSi
   

6. Scroll by that much

   Scroll(dS)
   

If you scroll less than once per MinTime or slower, you will get typical linear behavior. If you try to scroll faster, you will scroll quadratically with your actual scroll speed.

I have no idea how to actually do this with javascript, but I hope it provides somewhere to start.

Is there a unit of scrolling I can use by any chance? My terminology looks funny.

Answer 2

This should be helpful for capturing mouse wheel 'speed':

$(document).on('DOMMouseScroll mousewheel', wheel);


function wheel (event) {

  var delta = 0;

  if (event.originalEvent.wheelDelta) {
    delta = event.originalEvent.wheelDelta/120;
  } else if (event.originalEvent.detail) {
    delta = -event.originalEvent.detail/3;
  }

  if (delta) {
    handle(delta, event.currentTarget);
  }

  if (event.preventDefault) {
    event.preventDefault();
  }

  event.returnValue = false;
}

function handle (delta, target) {

   // scrollYourPageDynamiclyWithDelta(delta*delta);
   // manipulate of scrollTop here ;)

}