Question

我正在尝试在Bootstrap模式中实现infinite ajax scroll。

以下是模态的样子（尚未加载任何数据）：

<div class="modal fade" id="modal" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-body">
            <div class="infinite-messages-scroll">

            </div>
         </div>
      </div>
   </div>
</div>

当显示模态时，我将第一页数据加载到模态中，然后我初始化infinite-ajax-scroll：

$(document).on('show.bs.modal', '.modal', function(event) {
    var modal = $(this);
    var modalBody = modal.find('.modal-body');

    $.ajax({
        url: 'http://www.website.com/messages',
        type: 'get',
        dataType: 'html',
        success: function(html) {
            modalBody.find('.infinite-messages-scroll').append(html);

            var infiniteScroll = $.ias({
                container: '.messages-container',
                item: '.message',
                pagination: '.pagination',
                next: '.pagination li.active + li a',
                delay: 0,
                negativeMargin: 500
            });

            infiniteScroll.on('loaded', function(data, items) {
                var html = $(data);

                $('.modal-body').find('.messages-container').append(html.closest('.messages-container').html());
            });
        }
    });
});

以下是请求新页面时服务器的响应：

<div class="messages-container">
   <div class="message">Message1</div>
   <div class="message">Message2</div>
   <div class="message">Message3</div>
   <div class="message">Message4</div>
   <div class="message">Message5</div>
</div>
<ul class="pagination">
   <li class="disabled"><span>&laquo;</span></li>
   <li class="active"><span>1</span></li>
   <li><a href="http://www.website.com/messages?page=2">2</a></li>
   <li><a href="http://www.website.com/messages?page=3">3</a></li>
   <li><a href="http://www.website.com/messages?page=4">4</a></li>
   <li><a href="http://www.website.com/messages?page=5">5</a></li>
   <li><a href="http://www.website.com/messages?page=6">6</a></li>
   <li><a href="http://www.website.com/messages?page=7">7</a></li>
   <li><a href="http://www.website.com/messages?page=2" rel="next">&raquo;</a></li>
</ul>

因此，当加载下一页时，我会在loaded事件（上图）中捕获此内容，并将新消息附加到模式的.message-container。

问题是，当我向下滚动时，它只会加载下一页（第2页）。之后，它停止工作（即如果我继续向下滚动，它将不会加载另一页）。

我做错了什么？

Answer 1

您目前已将IAS绑定到窗口。尝试使用以下内容绑定到溢出div：

$('.infinite-messages-scroll').ias({ /** your options )*/})

请参阅溢出示例：https://infiniteajaxscroll.com/examples/overflow.html

无限Ajax滚动：仅加载一页，然后停止工作

1 个答案: