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 ;)

}

Answer 3

So this is more conceptual, but I think using the functions that others mentioned to detect scroll speed and such this could be helpful.

Logic:

1. Disable defaults for scrolling on a div.
2. Add a second div that just detects mouse wheel speed using @Tamlyn's code. Perhaps you could put this div behind your working div or wrap it around or inside your content some how. I'd try to just put it on the side for now.
3. Next, scroll the div based on the input from this 2nd div. Use your custom scrolling function to change scroll speed based and direction of the scroll. There will be some "devil in the details moments" here probably.