我想使用jScroll插件,以便在滚动到页面底部时加载另一个网页。我已经根据指令设置了它,并且可以看到插件正在生成一些代码,但是它没有按预期工作。任何帮助都将不胜感激。
超文本标记语言:
<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">
</div>
</div>
</div>
<div class="module__container header__other">
<div class="header__text--container">
</div>
<div class="header__image--overlap">
<img class="img__full" src="" style="height: auto !important;"> <!-- Path to header image file -->
</div>
</div>
</div>
<!-- End module A - Header -->
</div>
字符串
jQuery:
<script>
$('.scroll').jscroll();
$('.infinite-scroll').jscroll({
autoTrigger: true
});
</script>
型
1条答案
按热度按时间trnvg8h31#
您需要解决几个问题:
1)您只需要定位页面的内容区域。'jscroll'希望在您滚动到某个区域/结束时将新内容加载到该区域。目前,你的 Package 器div占据了整个页面的顶部到底部。尝试仅在页面内容周围添加新的div(例如:
<div class="content">....</div>
)。2)添加一个类到您的链接(例如:jscroll-next)-你将在jscroll插件的初始化中使用它来显式地将该链接定位为新页面。
删除你的jquery并修改如下:
字符串