class Hello extends React.Component {

  componentDidMount = () => {

    var _overlay = document.getElementById('overlay');

    var _clientY = null; // remember Y position on touch start

    function isOverlayTotallyScrolled() {

        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions

        return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight;

    }

    function disableRubberBand(event) {

        var clientY = event.targetTouches[0].clientY - _clientY;

​

        if (_overlay.scrollTop === 0 && clientY > 0) {

            // element is at the top of its scroll

            event.preventDefault();

        }

​

        if (isOverlayTotallyScrolled() && clientY < 0) {

            //element is at the top of its scroll

            event.preventDefault();

        }

    }

    _overlay.addEventListener('touchstart', function (event) {

        if (event.targetTouches.length === 1) {

            // detect single touch

            _clientY = event.targetTouches[0].clientY;

        }

    }, false);

​

    _overlay.addEventListener('touchmove', function (event) {

        if (event.targetTouches.length === 1) {

            // detect single touch

            disableRubberBand(event);

        }

    }, false);

  }

  render() {

    // border and padding just to illustrate outer scrolling disabled 

    // when scrolling in overlay, and enabled when scrolling in outer

    // area

    return <div style={{ border: "1px solid red", padding: "48px" }}>

      <div id='overlay' style={{ border: "1px solid black", overflowScrolling: 'touch', WebkitOverflowScrolling: 'touch' }}>

        {[...Array(10).keys()].map(x => <p>Text</p>)}

      </div>

    </div>;

  }

}

​

ReactDOM.render(

  <Hello name="World" />,

  document.getElementById('container')

);