Question

我很难让skrollr在移动浏览器上工作：在我的桌面计算机上一切正常，但在使用Safari for iOS时，我的页面不能完全滚动。你可以滚动，例如直到第二段，但没有进一步。

我已经在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。

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

1 个答案: