Two scrolling behaviors that I found odd on this page and on the NY Times example[1] on iOS:
- You can't scroll to the top by tapping the status bar.
- The scrolling momentum is different. There's less friction, as if you were scrolling through a list view (e.g. Mail).
Anyone know how/why? I thought it might be some -webkit-overflow-scrolling trickery[2] with a full-size container div or something, but I don't see anything too weird like that.
-webkit-overflow-scrolling makes scrolling feel like native, important for web apps and web views. It's like when you make an overflow: scroll div, and you make your main content inside this it.
It also ads the permanent url bar at the top and the navigational arrows at the bottom. This is useful for some web apps, because if those weren't permanent, you couldn't have buttons fixed on the bottom. This is because when you would click them, the back/forward arrows bar would appear pushing your button up so you have to click it again.
I used to use it but I've stopped because it's a whole level of complexity on your complex app.
I wish iOS safari scrolling would feel like native. Many people are using this property for this reason only, sacrificing screen space (the always-on browser interface). It used to be worse with the small screen of the iPhone 4.
If you take a look at the source[0], you'll notice they roll their own viewport renderer, presumably as a way for them to do their "tracking pixels". I imagine this might be what causes the difference in behavior? If anyone more knowledgeable could jump in, that would be cool.
- You can't scroll to the top by tapping the status bar.
- The scrolling momentum is different. There's less friction, as if you were scrolling through a list view (e.g. Mail).
Anyone know how/why? I thought it might be some -webkit-overflow-scrolling trickery[2] with a full-size container div or something, but I don't see anything too weird like that.
[1] https://amp.gstatic.com/v/mobile.nytimes.com/2015/10/08/us/r...
[2] https://css-tricks.com/snippets/css/momentum-scrolling-on-io...
EDIT: Turns out there is some -webkit-overflow-scrolling trickery going on[3]. But again, why?
[3] https://github.com/ampproject/amphtml/blob/77d9f31263866e56a...