15

According to this article http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ one should be able to enable native-like momentum-scrolling like this:

body{
        -webkit-overflow-scrolling: touch;
    }

However, this doesn't change anything in my webapp. It scrolls the same with or without that property. I expected to have a longer momentum like native apps do.

I tested it on a scrollable DIV, which works - but I don't want to add any unnecessary markup just for this.

Any tips?

Further info

Ok, it "kind-of" works like this:

html, body {
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    position:relative;
}

however, anything with position:fixed inside the BODY-tag moves while scrolling and re-attaches to it's correct position when scrolling stops. Is there something I can do to fix this?

Anyone having any input on this?

Fiddle: http://jsfiddle.net/nMxEg/1/

Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79
  • whats `position:relative;` for? – Andrew Aug 13 '13 at 02:10
  • What happens when you remove it or change it? – Andrew Aug 13 '13 at 02:26
  • @SantaClaus doesn't change anything. Added a fiddle above (how can I get the direct link to the results page only for testing on iOS?) – Raphael Jeger Aug 13 '13 at 06:38
  • I hate jsfiddle for that reason. Does this example work?: http://playground.johanbrook.com/css/touchtest.html If it does i can compare its code with yours in the jsfiddle. – Andrew Aug 13 '13 at 13:34
  • yes that does work, however, you are not scrolling the body here but only a DIV - this is different to my situation and I have already explained above that I know this would be a solution. Thanks! – Raphael Jeger Aug 13 '13 at 13:43
  • If this is important to you, I don't see why adding a div would be a problem – Andrew Aug 13 '13 at 14:14
  • Please see above: I tested it on a scrollable DIV, which works - but I don't want to add any unnecessary markup just for this. – Raphael Jeger Aug 13 '13 at 15:44
  • well it is NECESSARY. – Andrew Aug 13 '13 at 19:28
  • Necessary for what? Momentum scrolling works in my fiddle. What doesn't work is position:fixed inside that scrollcontainer on iOS. – Raphael Jeger Aug 13 '13 at 19:35
  • Sorry. I think I misunderstood (or misread). Things that are fixed (maybe a navigation bar), should not be in a scroll container, because they are not ment to scroll (right?). – Andrew Aug 13 '13 at 19:38
  • Isn't a BODY automatically overflow:scroll / auto, so every position:fixed inside a BODY is always in a scrolling container? And why does it only happen if I add the momentum-scrolling and only on iOS? – Raphael Jeger Aug 13 '13 at 20:29
  • Let me understand - So basically you can get momentum scroll to work, but the bar that you want fixed on top does not stay fixed and reattaches itself everytime you scroll, but you want that bar to be fixed while the momentum scroll works for the list? Btw you could test your jsfiddle result here: http://jsfiddle.net/nMxEg/1/embedded/result/ on your ipad. – Vrashabh Irde Aug 17 '13 at 05:43
  • Thats right! Exactly. – Raphael Jeger Aug 17 '13 at 12:45
  • I really don't see where "unnecessary markup" really applies here. I don't see why you can't just go with what works (what you said worked), and just live with a few extra lines of code. maybe rephrase your question to "Is there a way to avoid these extra lines of code",(if you still insist that it is unnecessary markup) or just go with what works – Andrew Aug 20 '13 at 00:57
  • 3
    I understand why this is requested and necessary. See, iOS Safari adds a bottom quicklinks navigation bar by default, and the only way to "hide" that bar is to scroll the body. Scrolling the body also shrinks the URL bar. Using a scrolling div does NOT result in the same effect. And, since scrolling the body works fine on Android, with momentum, basically the OP is asking for the same responsiveness in iOS. I have the same issue. Adding additional mark-up will NOT get rid of the bottom quicklinks bar or shrink the URL bar. The body MUST scroll to gain the additional screen real estate. – Lazerblade Dec 10 '13 at 13:34

2 Answers2

1

Use a Div with a set height, and perform the scroll with touchscroll on the div. The header and footer can remain as fixed divs at an the same level in the DOM.

<div id="fixedheader"></div>

Larry Leonidas
  • 41
  • 1
  • 8
0

Unfortunately, iOS doesn't have full support for fixed. http://caniuse.com/css-fixed

Petercopter
  • 1,218
  • 11
  • 16