21

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!

Organnoise
  • 331
  • 1
  • 7
  • 2
    would this help? It might be related http://stackoverflow.com/questions/26176288/webkit-overflow-scrolling-touch-breaks-in-apples-ios8. By the way, I love the design. Great use of materials and colors. Also, I know that fixed scrolling is taxing on mobile devices, I'm curious if this works or if there's a fix for it. –  Mar 04 '15 at 22:35
  • Did you found a way to solve your issue? I would be interested too. – cglacet Jun 24 '19 at 22:21

1 Answers1

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/

henry
  • 4,244
  • 2
  • 26
  • 37