Momentum Scrolling on Cordova

react
1

Anybody have experience implementing momentum scrolling on mobile using React?

WebkitOverflowScrolling doesn’t seem to work; and I leapfrogged the mixins since I’m using extend React.Component instead of React.createClass. So now I’m using stuck reviewing a bunch of half-baked scrolling libraries and trying to figure out what works.

https://www.npmjs.com/package/react-scroll
https://www.npmjs.com/package/react-scroll-box
https://react.rocks/tag/InfiniteScroll

And, no, I’m probably not interested in React Canvas, although it’s a very clever concept.

2

That’s weird, I went through this very same issue when I did a PR for Material UI, adding momentum scrolling. I had done it wrong the first time around, using webkitOverflowScrolling: 'touch', but it turned out WebkitOverflowScrolling: 'touch' worked great.

You can see it in the Material-UI code and it definitely works. Maybe something else is amiss?

3

And that compiles to Cordova and iOS9+? Huh, that’s super strange. I add it to my style, and the build tool seems to remove it.

render(){
    const overflowStyle = {
      WebkitOverflowScrolling: 'touch',
      overflowY: 'scroll'
    };
    return (
      <section style={ overflowStyle }>
        <div>
          { this.props.children }
        </div>
      </section>
    );
  }

And here’s what renders:

835×402 91.7 KB

I’m on:

  • Safari 9
  • Chrome 53
  • OSX El Capitan
  • Meteor 1.3.3
  • XCode 7.3

Going to check that I’m on the latest versions of everything. I think what I’m confused about at this point is why WebkitOverflowScrolling isn’t even making it through the build pipeline.

Thanks for the great code sample, by the way. I’ve been using React Toolbox which has it’s own implementation of Material UI, and I think I’m going to start using this implementation also!

4

Well, I had success with just straight up regular web. So I don’t know if the Cordova build process is messing something up? Have you tried using a library like Radium to handle auto-prefixing?