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 */