search

ftlabs / ftscroller

FTScroller is a cross-browser Javascript/CSS library to allow touch, mouse or scrollwheel scrolling within specified elements, with pagination, snapping and bouncing support.
MIT License
1.19k stars 121 forks source link

Limit bounce effect #82

Open MippinTeam opened 10 years ago

MippinTeam commented 10 years ago

I've been digging in the source code and trying to figure out a way to limit the bounce effect.

As far as I know the bounce animation is dependable on the fling which makes it possible to bounce the page on almost the entire screen.

What I would like to accomplish is to limit that bounce to, let's say, half the screen size (for example).

The bezier curve on the bounce only have effect on the animation speed so if someone could point me in the right direction that would be great.

rowanbeentje commented 10 years ago

Hi there,

This is largely handled in the _flingScroll function. It is a bit dumb at the moment - it has a fling distance calculated from the fling bezier curve, and then it arbitrarily takes an eighth of this distance (https://github.com/ftlabs/ftscroller/blob/master/lib/ftscroller.js#L1119) and then further limits it to half the container size (https://github.com/ftlabs/ftscroller/blob/master/lib/ftscroller.js#L1122). It then uses the bounceDecelerationBezierto determine the appearance of the bounce.

If this isn't already respecting half the screen size - are you using a mouse/touchpad fling? Those are slightly special cases in that the OS tends to already simulate flings by sending scrollwheel events in series; for example, on OS X a touchpad scroll fling will send a series of diminishing scroll events even after the reader has taken their fingers off the touchpad, which we can't distinguish from actual scroll events... so that can rubberband further, and have a slight pause before it bounces back...

Hope that helps?

MippinTeam commented 10 years ago

Hi,

I started investigating the parts of the code you mentioned. Created a new object property to define the distance (replacing the default 1/8) and another for container size and manage to reduce the bounce effect but it seems that it only has a visible effect until a certain value of distance.

Will continue to hack the script and do more testing on this.Will make a pull request with the changes I made when I'm done.

I'm using a touch fling (iPhone and Android phones)

Thanks for your help.

four43 commented 8 years ago

+1, please report back if you find something, @MippinTeam!