Question

我需要在Twitter BootStrap Modal中显示记录。我还需要实现infininte-scroll，这样当用户滚动到模态的底部时，它会获取更多记录。

我创建了一个基于Kaminari的How To: Create Infinite Scrolling with jQuery wiki的演示，它使用了infinite-scroll jQuery插件。

以下是我配置它的方式

模态HTML

<div tabindex="-1" role="dialog" id="mediaLibraryModal" class="modal fade" aria-labelledby="exampleModalLabel">
        <div role="document" class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" data-dismiss="modal" class="close" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
              <h4 id="exampleModalLabel" class="modal-title">Media Library</h4>
            </div>
            <div class="modal-body">
              <div id="media-images">
                <div class="page">
                  <p class='media-image'><img src='...'/></p>
                  <p class='media-image'><img src='...'/></p>
                  . . .
                </div>
              </div>
              <div id="paginator"></div>
            </div>
          </div>
        </div>
      </div>

咖啡脚本以启用自动滚动

$(document).ready ->
  $("#media-images .page").infinitescroll
    navSelector: "ul.pagination" # selector for the paged navigation (it will be hidden)
    nextSelector: "ul.pagination a[rel=next]" # selector for the NEXT link (to page 2)
    itemSelector: "#media-images p.media-image" # selector for all items you'll retrieve

CSS

#mediaLibraryModal .modal-dialog .modal-body {
  max-height: 420px;
  overflow-y: auto;
}

它适用于普通页面。当用户滚动到页面末尾时，它会加载更多记录，但同样不能与Twitter BootStrap模式一起使用。

似乎它必须与窗户或模态的高度有关，但我不是css家伙。有人可以指导如何解决它吗？

Answer 1

这是一种黑客攻击，但它适用于我的情况。它没有infininte-scroll的确切行为，但它实际上是为了达到目的。

以下是我配置infinitescroll的方法

$(document).ready ->
  $("#media-images .page").infinitescroll
    navSelector: "ul.pagination" # selector for the paged navigation (it will be hidden)
    nextSelector: "ul.pagination a[rel=next]" # selector for the NEXT link (to page 2)
    itemSelector: "#media-images div.media-image" # selector for all items you'll retrieve
    prefill: needToLoadMoreImages()

window.needToLoadMoreImages = ->
  mod = $('#mediaLibraryModal .modal-body')
  mod.scroll ->
    if $(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight #http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery
      $('.pagination li.active + li').find('a').click() #This is hack. Ideally this function shouldn't needed at all
      return true
    false
  return

当视口已满并在此函数中获取下一页内容时，将调用已配置的prefill函数。

我仍在寻找优雅的解决方案。

使用Twitter BootStrap模式的jQuery Infinite Scroll

1 个答案: