javascript - 如何使用jScroll插件？

Question

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

Answer 1

您有几个问题需要解决:

1) 您只需定位页面的内容区域。 “jscroll”希望在您滚动到某个区域/滚动到其末尾时将新内容加载到该区域中。目前，您的包装 div 占据了从上到下的整个页面。尝试仅在页面内容周围添加一个新的 div(例如: <div class="content">....</div> )。

2) 将一个类添加到您想要在下一页中加载的链接(例如: jscroll-next ) - 您将在 jscroll 插件的初始化中使用它来明确将该链接定位为新页面.

删除您的 jquery 并进行如下更改:

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