Nonlinear scrolling

Question

Scrolling s is like, well, linear:

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

I would like to apply a more attractive function , say x^2 :

but I would not know if this is possible and how ...

I would like to know you on this.

EDIT

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

Greetings.

Answer 1

High-level approach to your problem:

• Capture scroll events, track the time you received last.

• Calculate actual speed vA versus time until 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 

• Come up with some conversion to run on vA to get your desired vD speed:

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

• Calculate the "scroll factor" fS, the ratio of vD to vA:

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

• Calculate the scrolling of the delta dS using fS and dSi, the initial scroll size (1 scroll of the scroll event)

   dS(fS): dS = fS * dSi 

• Scroll this page

   Scroll(dS) 

If you scroll less than once per minute or slower, you get typical linear behavior. If you try to scroll faster, you will scroll the square with the actual scroll speed.

I don't know how to actually do this with javascript, but I hope it starts somewhere.

Is there a scroll unit that I can use randomly? My terminology looks ridiculous.

Answer 2

This should be useful 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 mentioned by others to determine the scroll speed, and this can be useful.

Logics:

• Disable default values ​​for scrolling on a div.
• Add a second div that simply determines the speed of the mouse wheel using the @Tamlyn code. Perhaps you can put this div behind your working div, or wrap it somehow or inside your content. For now, I'll try to just put it on its side.
• Then scroll through the div based on the input of this second div. Use your custom scroll function to change the scroll speed and scroll direction. There will probably be some kind of "devil in the details."