Trigger.IO momentum scrolling

Question

Is it possible to add momentum/intertia scrolling to a trigger.io-wrapped HTML5 iOS app?

I'm currently building a basic app, and noticed that the Webview does not respond to the momentum of a swipe action when scrolling through content (iOS 6; iPhone 5). In other words, a slow swipe and a fast swipe end up scrolling to the same section of the Webview (unlike a native app, where said fast swipe should scroll to a farther section).

Is it possible to change this behaviour and make it more native-like? I have tried following these iOS momentum scrolling instructions and modifying the CSS as shown below, however this doesn't work:

html {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

As a workaround I feel that I could potentially use an intertia-emulating JS library within my webview, however I want to avoid this option if possible.

Thanks in advance!

Answer 1

Yes. Try out Hojoki where you can see momentum scrolling in action: https://itunes.apple.com/us/app/hojoki/id525010205?mt=8

You don't have to do anything special to enable momentum scrolling in iOS. If you're not seeing it then it is likely that some styling or 3rd party library you're using as intefered with it.

Answer 2

Yes. I've managed to implement it with iScroll but had to modify the library. I really don't recommend -webkit-overflow-scrolling: touch as it does not render any DOM changes while momentum scrolling is occuring. So if you reize an element as a result of an element scrolling, it looks awful.

Here is my repository where I've added a new callback onScrolling() to alert when the scrolling animation is occurring in iScroll: https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js

And here's an example I'm using in my Trigger.io app where I change the height of the div during momentum and touch scrolling: http://jsfiddle.net/simpleshadow/wQQEM/22/

Answer 3

I don't know much about your app's css, but -webkit-overflow-scrolling: touch; would only give the touch scroll inertia to fixed or absolute elements with fixed height/width in the viewport. Applying -webkit-overflow-scrolling: touch to the body or html element would only work if you did something like

body {
    position:fixed;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

We use it in our trigger app to emulate UITableView