如何使用jScroll插件?

时间:2017-04-26 23:34:53

标签: javascript jquery html

我想使用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>

1 个答案:

答案 0 :(得分:2)

您需要解决几个问题:

1)您只需要定位页面的内容区域。 'jscroll'想要在滚动过去/结束时将新内容加载到某个区域。目前,您的包装器div从顶部到底部占用了所有页面。尝试仅在页面内容周围添加新div(例如:<div class="content">....</div>)。

2)在你的链接中添加一个类(例如:jscroll-next),你将在下一页中加载它 - 你将在初始化jscroll插件时使用它来明确地将该链接作为新页面

删除你的jquery并改变:

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