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

Website not completely scrollable when using skrollr on mobile

本文关键字:网站 滚动 skrollr 移动      更新时间:2023-09-26

我很难让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>

这让我抓狂,我们将不胜感激。

Nico,

看起来好像skrollr主体与名为gap的div混淆了。试试这个:

从.gapdiv中删除.rowdiv,然后完全删除.gapdiv。

在.row:的底部添加200px的填充(或者无论你的设计有多少作品)

.row{ padding-bottom: 200px; }

去掉.gap后,再加上row元素上的填充,就可以合成所需内容了。

我怀疑.gap是问题所在,因为当我在Chrome中检查元素时,它只在.gapdiv.

周围突出显示了skrollr主体