Skrollr添加空白 [英] Skrollr adding white space

问题描述

我已经尝试了一切.我精疲力尽，无法在Google上阅读4-5页，试图找到适合我的解决方案.即使使用skrollr示例，我的问题仍然存在(不是说它们做错了什么，我知道我只是不正确地理解它).因此，我上传了一个演示，仅在移动设备上显示此尴尬的空白.如果您尝试尝试，它将在桌面上正常工作.

I have tried everything. I am exhausted from reading 4-5 pages on google trying to find a fix that works for me. My problem is persistent even when I use the skrollr examples (not saying they did something wrong, I know I am just not understanding it right). So I have uploaded a demo to show this awkward white space ONLY on mobile devices. It works fine on desktop as you will see if you try.

我尝试了什么?

通过以下方式将forceHeight设置为false:

-setting forceHeight to false via:

skrollr.init({
    forceHeight: false
});

通过skrollr函数将forceHeight设置为false

-setting forceHeight to false via skrollr function

_forceHeight = options.forceHeight = false;

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

(originally it was _forceHeight = options.forceHeight !== false;)

-我试图找到其他任何可行的移动视差示例，但还没有一个.

-I have tried to find any other working mobile parallax example and have yet one.

-我试图弄乱"data-xxx"(x为整数)，看是否是问题所在(从skrollr的发明者那里读到，有时需要这样做).

-I tried to mess around with 'data-xxx' (x as an integer) to see if that was the problem (read from the inventor of skrollr that you need to do that sometimes).

没有任何效果.我永远感谢提供的任何帮助，因为在过去的48小时中，这非常令人沮丧.

Nothing has worked. I am eternally grateful for any help provided, for this has been an extremely frustrating past 48 hours.

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

Live Demo (if you can try to view on mobile to see my problem, if you view it on dekstop browser you will not see what I am talking about)

我不想发布我的网站，因为它是针对客户的，他们可能还不希望人们看到它，但是我确实遇到了zip文件提供的示例存在相同问题的情况.这是HTML.

I didn't want to post my site because it is for a client and they may not want people to see it yet, but I did have the SAME problem with an example provided by the zip file. Here's the 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>

在这一点上，对我来说，另一个帮助的途径是，如果有人知道我可以下载或购买的任何其他支持移动功能的视差模板.我的客户只是想在他的网站上使用某种视差滚动背景图像，如果我需要购买模板，他们说这很好.但是，这一方法有效，唯一的问题是讨厌的空白空间不应该存在.

At this point another avenue of help for me would be if anyone knew any other mobile-enabled parallax templates that I can either download or buy. My client just wants some type of parallax scrolling background images on his site, if I need to buy a template they said that was fine. However this one works and the only thing wrong with it is the annoying white space that shouldn't be there.

推荐答案

我将此添加到了CSS中，空白被踢出了大门.宾果游戏！

I added this to my CSS and the white space gets kicked out the door. Bingo!

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

这篇关于Skrollr添加空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！