带有 Twitter BootStrap 模式的 jQuery 无限滚动答案

【问题标题】：jQuery Infinite Scroll with Twitter BootStrap Modal带有 Twitter BootStrap 模式的 jQuery 无限滚动
【发布时间】：2016-02-25 09:43:00
【问题描述】：

我需要在Twitter BootStrap Modal 中显示记录。我还需要实现infininte-scrolling，以便当用户滚动到模式底部时，它会获取更多记录。

我基于 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 人。有人可以指导如何解决它吗？

【问题讨论】：

无限滚动通常根据身体上的滚动位置触发 - 我猜你必须将滚动的监视器改为模式 - 没有工作示例很难回答

标签： javascript jquery twitter-bootstrap infinite-scroll kaminari

【解决方案1】：

这是一种 hack，但它适用于我的情况。它没有无限滚动的确切行为，但它完全可以达到目的。

这是我配置无限滚动的方式

$(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 函数并在此函数中获取下一页内容。

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

【讨论】：