如何使用jScroll插件？

Question

我想使用jScroll插件，以便在滾動到頁面底部時加載另一個網頁。我已經按照說明設置了它，並且可以看到插件生成了一些代碼，但它沒有按預期工作。任何幫助在這裏將非常感激。

LINK TO PAGE

HTML：

 <script src="../js/jquery.jscroll.min.js"></script> 

     <div class="wrapper scroll"> 

     <!-- Start module A - Header --> 
     <div class="a"> 

      <div class="module__container header__mobile"> 

       <div class="work__flex--item"> 
        <div class="header__mobile--img full work_overlay"> 

        </div> 
        <div class="overlay__text"> 
         <h3 class="overlay__text--header" style="margin-bottom: 6px !important;">AMUR</h3> 
         <p class="h5 overlay__text--sub" style="margin-bottom: 15px !important; marg 

    in-top: 0px; font-weight: normal;">Materials making a difference.</p> 
       </div> 
      </div> 

     </div> 

     <div class="module__container header__other"> 

      <div class="header__text--container"> 
       <h2 style="color: white; margin-top: 35px !important; margin-bottom: 5px !important;">AMUR</h2> <!-- Title --> 
       <h5 style="color: white; font-weight: normal; margin-top: 0px !important;">Materials making a difference.</h5> <!-- Subtitle --> 
      </div> 

      <div class="header__image--overlap"> 
       <img class="img__full" src="../css/images/work-template/amur/amur_overlay.png" style="height: auto !important;"> <!-- Path to header image file --> 
      </div> 

     </div> 

    </div> 
    <!-- End module A - Header --> 

<a href="gohrvst.com/work/bench.html">next page</a> 

    </div> 

的jQuery：

<script> 
$('.scroll').jscroll(); 

$('.infinite-scroll').jscroll({ 
    autoTrigger: true 
}); 
</script> 

Answer 1

你有幾個問題需要解決：

1）你必須只定位的內容區域你的頁面。 'jscroll'想要將新內容加載到一個區域中，一旦你滾過它/到它結束。目前你的包裝div佔據了從頂部到底部的所有頁面。嘗試僅在頁面內容周圍添加新的div（例如：<div class="content">....</div>）。

2）爲你的鏈接添加一個類（例如：jscroll-next），你想在下一頁加載 - 你將在jscroll插件的初始化中使用這個類來顯式地將該鏈接作爲新的鏈接頁。

刪除你的jQuery和變化，例如：

$('.content').jscroll({ 
    nextSelector: 'a.jscroll-next:last' 
});