search

Prinzhorn / skrollr

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
http://prinzhorn.github.io/skrollr/
MIT License
18.53k stars 3.51k forks source link

iPhone 6S iOS 10 Skrollr not working #835

Open davidfarina opened 7 years ago

davidfarina commented 7 years ago

http://davidfarina.com/parallax

Thats the page. Somehow it does not move when scrolling. All fixed elements, inside a #main div which is configured skrollr.init({'skrollr-body':'main'}).

I know it looks terrible but I didnt proceed optimizing the view when functionality is not given.

I have tried lots of things and sometimes it didnt even show up (just background color blank screen). Sometimes it works so you can scroll a little but most of the time it scrolls the body (I guess?) instead of preventing normal scroll and listen to touch events...

Please help, im in a hurry...

davidfarina commented 7 years ago

I found a fix by myself since nobody here seems to be concerned about this or cares anymore about this project which is sad, to say the least, as I found it the best parallax library.

However, I noticed that a few elements still catch the scroll event and scroll the page how it should. The problem is that those are all small elements and neither the background nor one of the big foreground elements caught the event. So i simply added a dumb div with no function to the bottom right above my background layer inside the skrollr-body element which is called "main" in my project:

<div id="main">

     <!--
     Skrollr elemnts with data attributes and fancy things
     -->

     <div style="position:fixed;width:100%;height:100%;z-index:9;"></div>

</div>

Luckily this catches all event no matter where the scroll starts and since its in the background its not hindering any links from being clicked.

I hope I could help YOU when you landed on this page :)