Skrollr添加空格

Question

我什么都试过了。我精疲力竭地阅读了谷歌上的4-5页，试图找到一个对我有效的修复方法。我的问题仍然存在，即使我使用skrollr示例(不是说他们做错了什么，我知道我只是没有正确地理解它)。所以我上传了一个演示，只在移动设备上显示这个笨拙的空白区域。它在桌面上工作得很好，如果你试一下就会发现。

我都试了些什么？

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

skrollr.init({
    forceHeight: false
});

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

_forceHeight = options.forceHeight = false;

(最初是_forceHeight = options.forceHeight !== false;)

-I已经尝试寻找任何其他有效的移动视差示例，但仍有一个。

-I试图弄乱'data-xxx‘(x是一个整数)，看看这是否是问题所在(从skrollr的发明者那里可以读到，你有时需要这么做)。

没有一样东西起作用。我永远感谢所提供的帮助，因为在过去的48小时里，这是非常令人沮丧的。

Live Demo (如果你可以尝试在手机上查看我的问题，如果你在dekstop浏览器上查看，你不会看到我在说什么)

我不想张贴我的网站，因为它是给客户的，他们可能还不想让人们看到它，但我确实遇到了同样的问题，由压缩文件提供的示例。这是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。在我的例子中，我做到了，一旦我删除了这个参数，问题就完全消失了。