jquery 如何使用jScroll插件?

kuuvgm7e  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(121)

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

trnvg8h3

trnvg8h31#

您需要解决几个问题:
1)您只需要定位页面的内容区域。'jscroll'希望在您滚动到某个区域/结束时将新内容加载到该区域。目前,你的 Package 器div占据了整个页面的顶部到底部。尝试仅在页面内容周围添加新的div(例如:<div class="content">....</div>)。
2)添加一个类到您的链接(例如:jscroll-next)-你将在jscroll插件的初始化中使用它来显式地将该链接定位为新页面。
删除你的jquery并修改如下:

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

字符串

相关问题