javascript - 在移动设备上使用 skrollr 时网站无法完全滚动

Question

我很难让 skrollr 在移动浏览器上工作: 在我的台式电脑上一切正常，但在 iOS 上使用 Safari 时，我的页面无法完全滚动。你可以滚动例如直到第二段，但没有进一步。

我已经针对 iOS 上的 Safari 对此进行了测试，但未针对任何其他移动浏览器进行测试。

自相矛盾的是，它在我创建的 jsfiddle 预览中运行良好: http://jsfiddle.net/gatL4ttn/3/ http://jsfiddle.net/gatL4ttn/3/embedded/result/

它不适用于我的自托管版本: http://www.finiam.de/test

     <div
        class="parallax-image-wrapper parallax-image-wrapper-100"
        data-anchor-target=".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(http://placekitten.com/g/2000/1000)"
            data-anchor-target=".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 id="skrollr-body">
        <div class="gap gap-100" style="background-image:url(http://placekitten.com/g/2000/1000);">
        <div class="row">
          <div id="abc" class="col-sm-6 col-sm-offset-3">
            <h1>Lorem Ipsum Dolor Sit Amet.</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            <a href="#" class="btn btn-default" title="Lorem Ipsum Dolor Sit Amet.">A Hyperlink</a>
          </div>
        </div>
      </div>
        <div class="content" id="main">

        <div class="row">
          <div class="col-sm-6 col-sm-offset-3">
            <h1>Lorem Ipsum</h1>
              <p>
                Donec dui ante, posuere sit amet rutrum vel, suscipit lacinia nisl. Praesent euismod erat sed tempor iaculis. Integer luctus est vel nulla dapibus porttitor sit amet eget ante. Nullam eleifend leo lacinia rutrum gravida. Nunc convallis, lacus sed malesuada gravida, justo urna aliquam mi, sit amet sollicitudin lacus urna non mauris. Vivamus a ante a lectus vestibulum aliquam et quis sapien. Vivamus nec augue interdum, mollis risus eu, tempor libero. Curabitur at tempus dui. Mauris cursus massa at sodales semper. Aenean varius dui consectetur enim sagittis consectetur.
              </p>
              <p>
                 Bla Bla Bla Bla
              </p>
          </div>
        </div>
      </div>
    </div>

这让我抓狂，非常感谢您的帮助。

Answer 1

妮可，

似乎 skrollr-body 与名为 gap 的 div 混淆了。试试这个:

从 .gap div 中删除 .row div，并完全删除 .gap div。

在 .row 的底部添加 200px(或任何与您的设计相关的作品)的填充:

.row{ padding-bottom: 200px; }

删除 .gap 和行元素上的填充后，这应该会合成您需要的内容。

我怀疑 .gap 是问题所在，因为当我检查 Chrome 中的元素时，它仅突出显示 .gap div 周围的 skrollr-body。