向下滚动加载引导程序模型的数据(Lazy Load）

Load data on scroll down for bootstrap Model (Lazy Load)

本文关键字：数据 Lazy Load 模型 滚动 加载 引导程序      更新时间：2023-09-26

我有具有滚动功能的引导模式。我想在滚动到达模式底部(不是页面底部(时从AJAX调用加载数据。我正在使用这个jQuery代码，但它不适用于这个引导模式。

$(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://www.bootply.com/T0yF2ZNTUd

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

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

在此处启动

相关文章：