A ReactJS component to stop elastic bouncing on body
A ReactJS component which stops elastic bouncing from moving the entire page(body) when scrollable element has reached the extremes.
IOS (since IOS 5) offers native touch scrolling within nested containers via
-webkit-overflow-scrolling: touch;, however, if scrolling occurs at one of the extremes, top or bottom, the elastic bounce occurs on the page rather than the nested container.
bouncefix.js offers a viable solution to fix this issue.
react-bouncefix is a reuseable component for ReactJS based applications
note: If there is no content to scroll, scrolling is blocked on the container. This may cause issues if attempting to implement a scroll to refresh feature. This can be overcome creating a wrapper inside of your container and setting the height to 100% with a top and bottom padding of 1px (Not perfect, hackish, but it works)
npm install react-bouncefix
For documentation on how to use react, check out http://facebook.github.io/react/docs/getting-started.html
/** @jsx React.DOM */var Bouncefix = require'react-bouncefix';var MyComponent = ReactcreateClassreturn<Bouncefix className="Bouncefix">Hello from MyComponent!</Bouncefix>;;ReactrenderComponentMyComponentdocumentgetElementById'container';
Add to your css
By default this will be a
div, however, you may specify any React supported element. See http://facebook.github.io/react/docs/tags-and-attributes.html#html-elements
<Bouncefix className="Bouncefix" componentClass="ul">Hello from MyComponent!</Bouncefix>