javascript - 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 小时一直非常令人沮丧。

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>