jQuery Infinite Scroll with Twitter BootStrap Modal

Question

Мне нужно отображать записи в Twitter BootStrap Modal. Мне также необходимо реализовать infininte-scroll ing, так что когда пользователь прокручивается до нижней части модального, он извлекает больше записей.

Я создал демо-версию на основе How To: Create Infinite Scrolling with jQuery wiki of Kaminari, которая использует плагин jQuery infinite-scroll.

Вот как я настроил его

Модальные 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 Modal.

Кажется, он должен быть связан с высотой окна или модальным, но я не css-парень. Кто-нибудь может посоветовать, как это исправить?

Answer 1

Это своего рода взлом, но он работает в моем случае. Он не имеет точного поведения бесконечной прокрутки, но он в точности служит цели.

Вот как я настроил 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 функция вызывается, когда видовой экран является полным и получать следующий содержимое страницы в данной функции.

Я все еще ищу элегантное решение.