如何使用jScroll插件？

Question

I would like to use the jScroll plugin in order to load in another web page when scrolling to the bottom of the page. I have set it up according to the instruction, and can see that there is some code being generated by the plugin, however it is not working as expected. Any help here would be really appreciated.

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

You have a couple issues to address:

1) You need to target only the content area of your page. The 'jscroll' wants to load new content into an area once you scroll past it/to it's end. At the moment your wrapper div takes up all of the page from the top to the bottom. Try adding a new div around your page content only (eg: <div class="content">....</div> ).

2) add a class to your links (eg: jscroll-next )that you want to use to load in the next page - you will use this in your initialisation of the jscroll plugin to explicitly target that link as the new page.

Delete your jquery and change as such:

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