3

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!

dbau
  • 16,009
  • 2
  • 21
  • 31
  • Scrolling on Trigger on iOS should have momentum (and does when I try it). Maybe there is something in the page you are viewing causing it not to work? Can you try a simple page with long content but no styling to see if you still have a problem? – Connorhd Oct 24 '12 at 12:41
  • @Connorhd: I've tried with vanilla styling but still no luck. I do get a bit of continued scrolling even after I release my finger, but it seems artificial and as stated above I see no difference between a _slow swipe_ and a _fast swipe_. In your test, if you scroll from the top to the bottom with an aggressive swipe, do you go noticeably farther than with a soft swipe? – dbau Oct 24 '12 at 12:51
  • I see a difference between a smooth and a fast swipe, the Trigger webview behaves similarly to webpages opened in safari when it comes to scrolling for me (but with no overscroll). To test I'm just using the default app Trigger creates and adding some extra paragraphs to make the page longer. – Connorhd Oct 24 '12 at 13:12
  • Thanks Connor - I must have had a conflicting library because after starting with a fresh project and lots of `lorem ipsum` text, momentum scrolling works. Though, it still isn't as pronounced as some native apps I use (see comment below). – dbau Oct 25 '12 at 09:38

3 Answers3

2

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

Matthew
  • 222
  • 1
  • 9
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.

Amir Nathoo
  • 1,866
  • 12
  • 12
  • 2
    To be honest Hojoki does **not** use native momentum scrolling at all. We are working with [iScroll](http://cubiq.org/iscroll-4), which provides you with some more features (e.g. better tracking of current scroll position, pull down to refresh, snap to element, ..). On the other side it can take use lots of performance (and memory) when using it with many DOM elements (especially on older devices). However, iOS performance seems to be much better than Android. – Patrick Rudolph Oct 25 '12 at 07:34
  • Thanks - after starting a clean project I can now see the effect in action, though it still isn't as pronounced as some of my native apps. Amir: Is it possible to tweak the momentum scrolling options? I still see a considerable difference in the scrolling of the native Facebook or Instagram app vs a T.IO app - the native apps tend to continue to scroll for longer, which IMO gives a more fluid feel. Is this customisable? Or would it be best to use a library like the one @PatrickRudolph suggested? – dbau Oct 25 '12 at 09:37
  • As far as I know scrolling with `-webkit-overflow-scrolling: touch;` just doesn't feel exactly the same as native scrolling using something like a UIScrollView. Maybe this [post about issues with mobile safari scrolling](http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/) provides some help/advice. – Patrick Rudolph Oct 25 '12 at 10:24
  • 3
    Just to be clear, `-webkit-overflow-scrolling` is used to add scrolling sections within a webpage, the full webview scrolling is handled by a UIScrollView within the UIWebView. It sould be possible to write an iOS native plugin for Trigger that allowed you to tweak the values used for the UIWebViews internal UIScrollView, but its not something I've tested. This sounds like the property you want to modify http://developer.apple.com/library/ios/#documentation/uikit/reference/UIScrollView_Class/Reference/UIScrollView.html#//apple_ref/occ/instp/UIScrollView/decelerationRate – Connorhd Oct 25 '12 at 12:52
0

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/

Corey Gwin
  • 150
  • 2
  • 12