Skrollr添加空白区域

Question

我尝试了一切。 我在谷歌上阅读4-5页试图找到适合我的修复程序时感到筋疲力尽。 即使我使用skrollr示例（不是说他们做错了，我知道我只是不理解它），我的问题仍然存在。 所以我上传了一个演示，仅在移动设备上显示这个尴尬的白色空间。 它可以在桌面上正常工作，如果您尝试，您将会看到。

我试过了什么？

- 通过以下方式设置forceHeight为false：

skrollr.init({
    forceHeight: false
});

- 通过skrollr函数将forceHeight设置为false

_forceHeight = options.forceHeight = false;

（原来它是_forceHeight = options.forceHeight！== false;）

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

- 我试图弄乱'data-xxx'（x作为一个整数），看看是不是问题（从skrollr的发明者那里读取你有时需要这样做）。

没有任何效果。 我永远感激所提供的任何帮助，因为过去48小时这是非常令人沮丧的。

现场演示 （如果您可以尝试在移动设备上查看我的问题，如果您在dekstop浏览器上查看它，您将看不到我在说什么）

我不想发布我的网站，因为它是针对客户端的，他们可能不希望人们看到它，但我确实遇到了与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上看到了这个问题。 我正在查看您链接到的Live Demo上的源代码，并且您没有使用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

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

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

Answer 3

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