Keith Clark's CSS Parallax Inertial/Momentum Scrolling on Mobile

Question

So I have built a site using Keith Clark's pure CSS parallax idea. And it looks good, but I'm curious if anyone has figured out how to allow inertial/momentum scrolling on iOS.

Here is my site so far.

What I know so far:

Currently inertial/momentum scrolling doesn't work because essentially the whole page is held within a container with overflow-y:auto. So when you are scrolling on the page you are scrolling within a container. On iOS you have to apply -webkit-overflow-scrolling: touch to allow anything that scrolls that isn't the viewport to have inertial/momentum scrolling.

If you add -webkit-overflow-scrolling: touch to .parallax then the entire parallax effect breaks. example of that here

I've tried adding iscroll.js to the page but it also breaks the page by making the children within the .parallax container to scroll in a way that isn't proper. It makes the parallax layers move up and down relative to the viewport instead of he container.

Another problem that this causes which isn't as big a deal but would be nice to address here since it's related is that on iOS the page will never go into minimal-ui since that only happens when the viewport scrolls.

I've seen people ask about this on the blog post so I figured I could bring the same problems over to stackoverflow and see if anyone has any good ideas.

Thanks!

Answer 1

Not what you want to hear (assuming you put in some good hours reading through Keith Clark's guide) but iOS handles scrolling events differently than desktop. It's possible you could adjust what you have already, but if you really want this you're probably better off switching to a js tool with documented support for iOS parallax + momentum. Stellar can do this, for example - http://markdalgleish.com/projects/stellar.js/docs/