如何使用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' 
});