Created: 2014-05-19 01:06
Updated: 2018-08-24 09:49
License: other


A ReactJS component which stops elastic bouncing from moving the entire page(body) when scrollable element has reached the extremes.


This is a ReactJS implementation of @jaridmargolin's bouncefix.js


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

##Example For documentation on how to use react, check out

####For projects using JSX

/** @jsx React.DOM */
var Bouncefix = require('react-bouncefix');

var MyComponent = React.createClass({
  render: function() {
    return (
    	<Bouncefix className="Bouncefix">
    		Hello from MyComponent!


Add to your css

.Bouncefix {
	overflow-y: auto;
	overflow-x: hidden;
  -webkit-overflow-scrolling: touch;


#####component By default this will be a div, however, you may specify any React supported element. See

<Bouncefix className="Bouncefix" componentClass="ul">
    Hello from MyComponent!
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more