scrollable

React Scrollable


#### A library that brings smooth scrolling interactions to modern mobile browsers.

React Scrollable is a set of React.js components that provide an abstraction for layer composition and scroll events. The components provide a declarative API for independently positioning of each layer to create high performance, high frame rate interactions.

The project is tested in many iOS devices from iPhone 3GS to iPhone 6/6 plus and some variety of Android phones. Example uses cases can range from simple parallax effects to fully interactive gesture based websites that feel like native iOS/Android Apps.

Many examples are provided on the examples/ folder.

$3

##### Tests and coverage

$ npm test

##### Build

$ npm run build

##### Development (or just to see the examples)

$ npm run dev

Open http://localhost:8080/examples/ after starting up the server to check out the examples.

##### Development auto-watch unit tests (without coverage)

$ karma start

Notice: The current version throws a lot of warnings about 'owner-based context'. To ignore these messages you can use the following regex on the Chrome Dev-Tools console filter: ^((?!owner-based).)*$

$3

Pull requests and issues are welcome. Not only for code but also for documentation and examples.

* Use a code editor with JSXHint or run jsxhint before committing
* Use a code editor with .editorconfig support or read the file
and follow whitespace conventions
* Please, pay attention to the tests, and ideally provide new
tests alongside pull requests. If you are not used to testing, send
pull requests anyway, but understand it might take a while until a
maintainer can merge your pull request

$3

* Server-side prefixes are hardcoded for webkit now (because of PhamtomJS)
and ideally it should have multiple props in the compatibility order (e.g.
-moz-transform:...;-webkit-transform:...;transform:...;)
* I keep forgetting to create the nested scrolling example and the
"Flipboard without canvas" example.
* Size/Position dependencies in lower level, look at ExtJS anchorTo for
a higher level API eventually
* FPS meter on examples, maybe optional parameter
* Styles are currently only on the examples, need to figure out a way to
be in JavaScript and still be able to override via some API. Should it
even be allowed?
* Figure out a build system to support:
* CommonJS require if installed by npm
* Dev build with warnings and/or performance profiling helpers
* require('scrollable/scroller') or require('scrollable').Scroller
* npm run dev as is, but compile examples folder with react.min.js
* scrollingX and scrollingY props are mandatory for now.
Explore ways to make this both optional with reasonable dafault and
update/pull request Zynga Scroller to change this at runtime.