[英]How to use jScroll plugin?
我想使用jScroll插件來滾動到頁面底部時加載另一個網頁。 我已經按照說明進行了設置,可以看到該插件正在生成一些代碼,但是該插件無法正常工作。 在這里的任何幫助將不勝感激。
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>
您有幾個問題要解決:
1)您只需要定位頁面的內容區域。 一旦滾動過去/結束,“ jscroll”希望將新內容加載到區域中。 目前,您的包裝器div占據了從上到下的所有頁面。 嘗試僅在頁面內容周圍添加一個新的div(例如: <div class="content">....</div>
)。
2)在要用於下一頁加載的鏈接中添加一個類(例如:jscroll-next)-您將在初始化jscroll插件時使用該類,以明確地將該鏈接定位為新頁面。
刪除您的jquery並進行如下更改:
$('.content').jscroll({
nextSelector: 'a.jscroll-next:last'
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.