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.52k stars 3.49k forks source link

mobile not recognizing forceHeight: false #491

Open tripstar22 opened 10 years ago

tripstar22 commented 10 years ago

Working on a responsive site that uses skrollr. Looks great on desktop but I can scroll infinitely past the footer on mobile and tablet. Any hints?

Prinzhorn commented 10 years ago

Need code since it works for others.

tripstar22 commented 10 years ago

Sending you a private message via Twitter because the problem is on a production site. It's kinda complicated so it would be difficult to recreate in a demo. It will be from @LadartCreative. Thanks.

tripstar22 commented 10 years ago

Our app.js in minified but our code for skrollr is... if($("body").hasClass("home")) { skrollr.init({ forceHeight: false, mobileDeceleration: 0.05, smoothScrolling: true }); }

Prinzhorn commented 10 years ago

Can't reproduce on Android. What I did notice though is that since skrollr-body doesn't cover the whole thing, sometimes native scrolling kicks in (depending on where you touch). This way you could theoretically scroll twice the height of the page.

tripstar22 commented 10 years ago

Ok going to have to change out some things for the sticky nav for mobile and tablet but I think we are heading in the right direction. Thanks again for your help.

tripstar22 commented 10 years ago

Moved div id="skrollr-body" just inside the opening body tag, and the closing div just inside the closing body. Now it seems to be getting stuck a little before the footer on mobile and tablet?

Prinzhorn commented 10 years ago

Do you mean this overlapping? (the screenshot was created in Firefox with JavaScript disabled) screen shot 2014-04-04 at 10 20 06

tripstar22 commented 10 years ago

No it was getting stuck around the red circles towards the bottom of the page. Skrollr is currently disabled on touch devices, but is still active on desktop.

Prinzhorn commented 10 years ago

No it was getting stuck around the red circles towards the bottom of the page

Does that mean it's solved now?

tripstar22 commented 10 years ago

No we've just gone to a static layout on touch screens (for the time being). But we would like to come back a revisit the problem if we have time.

DanDvoracek commented 10 years ago

Hi there,

I am facing a similar issue I guess.. Well it started similar. I know this has been covered but I am a bit lost on that one so I take my chances.

I am playing around with few javascripts libraries and I wanted to add skrollr to an academical project. I am a bit confused regarding the documentation as english in not my first language. I am afraid I did not understand how to implement the mobile detection correctly as it is not working. Worse than that, it looks like the elements I want to scroll disappear on mobile (I tested safari, chrome and opera on iOS).

I'm a bit ashamed about putting my code here as I'm learning but here is the link: erased

I am not really sure if there is actually something more to do with my divs or with the javascript. Any help is more than welcome.

Forgive me if I don't use these files correctly regarding licensing, this is not something that will be "published" anyway ;)

Many thanks for any tips or infos.

Prinzhorn commented 10 years ago

@DanDvoracek

  1. You have added the id skrollr-body to the <body> element, but you need to add it to a children of the body. E.g. <body><div id="skrollrobdy">...
  2. You use position:fixed. These elements need to be outside of skrollr-body.
DanDvoracek commented 10 years ago

Cool thank you for the explanation. I had another issue with it coming from processingJs. Nothing to do with this plugin, but it looks like they don't always like each other. Processing looks too heavy for mobile anyway. Once again thanks for the tip!

elful commented 8 years ago

Yo guyz, just found a quick fix for this if someone still needs.

Just add this to each query for every screen size: `html,body { height: 100%; }

skrollr-body {

      width: 100%;
      height: 100%;
      float: left;
  }`

As well on your index.html you need to modify the script init a little bit so first will read the screen size before running. Simply add:

`

        if ( $(window).width() > 768) {      
            var s=skrollr.init({forceHeight: false});    
        } 
        else {
            var s=skrollr.init({forceHeight: true,
                                smoothScrolling: false,
                                mobileDeceleration:0.004,
                                skrollrBody:'skrollr-body'}); 
        }

`

Hope it helps, for me is working fine. Tested on desktop and multiple mobile devices.