在手机上使用skrollr时网站不能完全滚动

问题描述：

在手机浏览器上使用skrollr很困难：在我的台式计算机上，一切正常，但在iOS上使用Safari时，我的页面不能完全滚动。您可以滚动例如直到第二段，但没有进一步。在手机上使用skrollr时网站不能完全滚动

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

这是推动我疯了，帮助将非常感激。

答

尼科，

看来好像skrollr，身体越来越与格称为差距混淆。试试这个：

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

起飞，并添加200像素（或然而，许多作品与您的设计）填充到.row的底部：

.row{ padding-bottom: 200px; }

随着.gap删除，该行元素的填充，这应该怎样综合你需要。

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

在手机上使用skrollr时网站不能完全滚动

相关推荐