Skrollr添加空白区域

Question

I have tried everything. I am exhausted from reading 4-5 pages on google trying to find a fix that works for me. My problem is persistent even when I use the skrollr examples (not saying they did something wrong, I know I am just not understanding it right). So I have uploaded a demo to show this awkward white space ONLY on mobile devices. It works fine on desktop as you will see if you try.

What have I tried?

-setting forceHeight to false via:

skrollr.init({
    forceHeight: false
});

-setting forceHeight to false via skrollr function

_forceHeight = options.forceHeight = false;

(originally it was _forceHeight = options.forceHeight !== false;)

-I have tried to find any other working mobile parallax example and have yet one.

-I tried to mess around with 'data-xxx' (x as an integer) to see if that was the problem (read from the inventor of skrollr that you need to do that sometimes).

Nothing has worked. I am eternally grateful for any help provided, for this has been an extremely frustrating past 48 hours.

Live Demo (if you can try to view on mobile to see my problem, if you view it on dekstop browser you will not see what I am talking about)

I didn't want to post my site because it is for a client and they may not want people to see it yet, but I did have the SAME problem with an example provided by the zip file. Here's the HTML..

HTML

<div
    class="parallax-image-wrapper parallax-image-wrapper-100"
    data-anchor-target="#dragons + .gap"
    data-bottom-top="transform:translate3d(0px, 200%, 0px)"
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">

    <div
        class="parallax-image parallax-image-100"
        style="background-image:url(images/kitteh1.jpg)"
        data-anchor-target="#dragons + .gap"
        data-bottom-top="transform: translate3d(0px, -80%, 0px);"
        data-top-bottom="transform: translate3d(0px, 80%, 0px);"
    ></div>
    <!--the +/-80% translation can be adjusted to control the speed difference of the image-->
</div>

<div
    class="parallax-image-wrapper parallax-image-wrapper-100"
    data-anchor-target="#bacons + .gap"
    data-bottom-top="transform:translate3d(0px, 200%, 0px)"
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">

    <div
        class="parallax-image parallax-image-100"
        style="background-image:url(images/kitteh2.jpg)"
        data-anchor-target="#bacons + .gap"
        data-bottom-top="transform: translate3d(0px, -80%, 0px);"
        data-top-bottom="transform: translate3d(0px, 80%, 0px);"
    ></div>
</div>

<div
    class="parallax-image-wrapper parallax-image-wrapper-50"
    data-anchor-target="#kittens + .gap"
    data-bottom-top="transform:translate3d(0px, 300%, 0px)"
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">

    <div
        class="parallax-image parallax-image-50"
        style="background-image:url(images/kitteh3.jpg)"
        data-anchor-target="#kittens + .gap"
        data-bottom-top="transform: translate3d(0px, -60%, 0px);"
        data-top-bottom="transform: translate3d(0px, 60%, 0px);"
    ></div>
</div>

<div id="skrollr-body">
    <div class="header" id="dragons">
        Skrollr demo of classic parallax sections. Degrades without JavaScript (could be disabled on mobile without breaking everything).
    </div>
    <div class="gap gap-100" style="background-image:url(images/kitteh1.jpg);"></div>
    <div class="content" id="bacons">
        <p>Landjaeger chicken ham fatback sausage hamburger, tri-tip capicola pastrami pancetta ribeye turducken. Rump shank turkey pig kevin sausage meatloaf tenderloin drumstick short ribs short loin. Prosciutto spare ribs chuck, pork strip steak pork chop swine bacon turkey shoulder andouille. Jowl landjaeger chicken corned beef. Ham hock kielbasa pancetta ground round sausage. Spare ribs porchetta pastrami filet mignon drumstick ball tip. Beef ribs prosciutto kevin, landjaeger shoulder ham hock ham brisket sirloin chuck t-bone drumstick kielbasa pork chop.</p>

        <p>Landjaeger spare ribs chicken ball tip, filet mignon frankfurter ribeye tenderloin corned beef. Strip steak boudin pork loin, chicken turkey ball tip beef ribs ground round shank ham hock. Kevin capicola beef, chuck pork chop shoulder brisket doner meatloaf shank ham hock tenderloin. Chuck ham hock short ribs ground round sausage prosciutto shoulder bacon andouille tri-tip beef biltong filet mignon chicken. Pork belly andouille shank, bacon sausage meatloaf bresaola pork chop short ribs t-bone. Ham hock salami porchetta bacon beef turkey, strip steak kielbasa pancetta brisket meatball t-bone.</p>

        <p>Chicken pancetta capicola chuck, turkey meatball jerky frankfurter kielbasa ball tip bacon ground round. Beef ribs brisket meatloaf short ribs landjaeger shankle spare ribs sausage, pancetta swine sirloin flank. Tail shank chuck pancetta, ham meatloaf short ribs sausage rump turkey kevin pork chop landjaeger. Doner boudin short ribs t-bone, jerky shankle bresaola drumstick. Strip steak shank spare ribs boudin doner short ribs. Boudin prosciutto jowl tenderloin tongue beef ribs, short ribs salami short loin strip steak ham jerky. Shank pancetta beef ribs, corned beef ham hock pork belly drumstick tail bresaola chuck.</p>
    </div>
    <div class="gap gap-100" style="background-image:url(images/kitteh2.jpg);"></div>
    <div class="content" id="kittens">
        Here be kittens
    </div>
    <div class="gap gap-50" style="background-image:url(images/kitteh3.jpg);"></div>
    <div class="content" id="done">
        Images from <a href="http://placekitten.com/attribution.html">http://placekitten.com/</a>, thanks!
    </div>
</div>

<script type="text/javascript" src="../dist/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init({
    forceHeight: false
});
</script>

At this point another avenue of help for me would be if anyone knew any other mobile-enabled parallax templates that I can either download or buy. My client just wants some type of parallax scrolling background images on his site, if I need to buy a template they said that was fine. However this one works and the only thing wrong with it is the annoying white space that shouldn't be there.

Answer 1

Yes, I see the issue on my iPhone. I'm looking at the source code on the Live Demo you linked to, and you're not using forceHeight: false as you claim to be. It reads:

<script type="text/javascript">
skrollr.init({
    smoothScrolling: false,
    mobileDeceleration: 0.004
});
</script>

Try changing it to:

<script type="text/javascript">
var s = skrollr.init({
    forceHeight: false,
    smoothScrolling: false,
    mobileDeceleration: 0.004
});
</script>

Answer 2

I added this to my CSS and the white space gets kicked out the door. Bingo!

height:100%!important; /* Fix to prevent skrollr setting incorrect height */

Answer 3

Old thread, but I was having the same issue for a long time and wanted to share my solution. Check your stylesheet to see if you have a height:100% set to the body/html. In my case I did, and as soon as I removed that parameter the issues completely went away.