Question

我在Joomla工作，所以很难产生小提琴，但这就是这个想法：

我有一个马赛克网格，其中有12篇文章在页面加载时显示，并且有一个＆＃39;加载更多＆＃39;按钮 - 单击时，将再加载12个，依此类推。

当用户滚动按钮时，如何触发按钮单击自动，并自动加载下一个12，依此类推？

按钮HTML：

<div class="loadmore">
<span class="loadmore-text">load more</span>
</div>

按钮点击：

container.addEvent('click:relay([data-mosaic-loadmore])', relay['loadmore']);
            container.addEvent('click:relay([data-mosaic-orderby])',     relay['ordering']);
            container.addEvent('click:relay([data-mosaic-filterby])',     relay['filtering']);

Answer 1

您可以检查用户是否滚动到最后？

将$（document）.scrollTop与文档的高度进行比较，如果你在底部，则可以触发点击。

$(document).on('scroll', function () {

            var height = $('body')[0].scrollHeight;
            if (height - $(document).scrollTop() < 1.1 * $(window).height()) {
                loadConent();
            }
        });

Answer 2

检测您向下滚动的距离不是一个好方法，因为您将来可能会发现内容的长度会发生变化，因此您必须更新该值。

相反，我建议做这样的事情：

jQuery(document).ready(function($){

    var loadmore = $('.loadmore');

    $(document).on('scroll', function(){
        if (loadmore.visible(true)){
            loadmore.trigger('click');
        }
    });

});

当用户滚动按钮时触发按钮单击

2 个答案: