Question

我有滚动的bootstrap模式。我想在滚动命中模式底部（非页面底部）时从AJAX调用加载数据。我正在使用这个jQuery代码，但它不能用于这个bootstrap模式。

$(window).scroll(function() {
 if($(window).scrollTop() == $(document).height() - $(window).height()) {
       // ajax call get data from server and append to the div
 }
});

这是我的模特

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
  <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;"> 
    <div class="modal-content"> 
        <div class="modal-header"> 
            <h3 class="modal-title">ASDFASDFASDFASDF</h3> 
        </div> 
        <div class="modal-body">ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF</div> 
        <div class="modal-footer">ASDFASDFASDFASDF</div> 
    </div> 
</div>

我的CSS是

/* CSS used here will be applied after bootstrap.css */

.modal{
 display: block !important;
}
.modal-dialog{
  overflow-y: initial !important
}
.modal-body{
  height: 250px;
  overflow-y: auto;
}

http://127.0.0.1:8000/rango/category/other-frameworks/add_page

Answer 1

在滚动modal-body时，您需要确定modal-body是否已达到最低点，因此请将window更改为modal-body，如下所示：

$('.modal-body').scroll(function() {
  if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
       alert('reached bottom');
  }
});

<强> Bootply here

向下滚动加载数据以获取引导模型（延迟加载）

1 个答案: