Skrollr增加白色空间

Question

我已经尝试了一切。我在阅读谷歌4-5页的时候疲惫不堪，试图找到一个适合我的解决方案。即使使用skrollr示例，我的问题仍然存在（不是说他们做错了什么，我知道我只是不理解它）。所以我上传了一个演示，仅在移动设备上显示这个尴尬的空白空间。它可以在桌面上正常工作，因为你会看到如果你尝试。

我试过了什么？

通过-setting forceHeight为false：

skrollr.init({ 
    forceHeight: false 
}); 

通过skrollr功能

_forceHeight = options.forceHeight = false; 

-setting forceHeight为false;

（最初是_forceHeight = options.forceHeight ==假的！）

- 我试图找到任何其他工作的移动视差的例子，并有一个。

- 我试图用'data-xxx'（x是一个整数）来弄清楚这是否是问题（有时需要从skrollr的发明者那里读到）。

没有工作。我对所提供的任何帮助感到非常感激，因为这在过去的48小时内一直非常令人沮丧。

Live Demo（如果你可以尝试查看手机上看到我的问题，如果你认为它在桌面浏览器，你不会看到什么我谈论）

我没有要发布我的网站，因为这是针对客户端的，他们可能不希望人们看到它，但是我通过zip文件提供的示例确实遇到了同样的问题。这里的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> 

在这一点上的帮助另一种途径对我来说将是，如果有人知道任何其他功能的移动视差模板，我可以下载或购买。我的客户只是想在他的网站上使用某种类型的视差滚动背景图片，如果我需要购买他们认为没问题的模板。然而，这一个工作，唯一错误的是它不应该在那里的恼人的白色空间。

Answer 1

是的，我在iPhone上看到了这个问题。我正在查看您链接到的实时演示的源代码，并且您没有像您声称的那样使用forceHeight: false。它读取：

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

尝试将其更改为：

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

Answer 2

旧线，但我有很长一段时间同样的问题，并希望分享我的解决方案。检查你的样式表，看看你是否设置了height:100%设置body/html。在我的情况下，我做了，一旦我删除了这个参数，问题就完全消失了。

Answer 3

我将此添加到我的CSS中，白色空间被踢出了门。答对了！

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