在手機上使用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>

這是推動我瘋了，幫助將非常感激。

來源

2014-09-21 Nico

尼科，

看來好像skrollr，身體越來越與格稱爲差距混淆。試試這個：

從.gap div中刪除.row div，並完全刪除.gap div。

起飛，並添加200像素（或然而，許多作品與您的設計）填充到.row的底部：

.row{ padding-bottom: 200px; }

隨着.gap刪除，該行元素的填充，這應該怎樣綜合你需要。

我懷疑.gap是問題所在，因爲當我檢查Chrome中的元素時，它僅突出顯示圍繞.gap div的skrollr-body。

來源

2014-11-03 21:24:32

在手機上使用skrollr時網站不能完全滾動

回答

相關問題