向下滚动引导模型加载数据 [英] Load data on scroll down for bootstrap Model

问题描述

我有bootstrap模态有滚动。我想从AJAX调用时加载数据，滚动击中底部。我使用这个jQuery代码，但它不工作在此引导模式。

  $（window）.scroll 
 if（$（window）.scrollTop（）== $（document）.height（） -  $（window）.height（））{
 // ajax调用从服务器获取数据并追加div 
} 
}）; 
  

以下是我的模型

 < div class =modaltabindex = -  1role =dialogaria-labelledby =myModalLabelaria-hidden =true> 
< div class =modal-dialogstyle =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 =模体> 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> 
  
 
 
 
 
 
 
 
 p> 
 
 
  / *这里使用的CSS将在bootstrap.css之后应用* / 
 
 .modal {
显示：block！important; 
} 
 .modal-dialog {
 overflow-y：initial！important 
} 
 .modal-body {
 height：250px; 
 overflow-y：auto; 
} 
  
  http://www.bootply.com/T0yF2ZNTUd  
解决方案
您需要确定 modal-body 已达到底部，因为您正在滚动 modal-body ，因此更改窗口到 modal-body 如下：
  $（'。 modal-body'）scroll（function（）{
 if（$（this）.scrollTop（）+ $（this）.innerHeight（）> = this.scrollHeight）{
 alert到底）; 
} 
}）; 
   
 
 
 
   Bootply here   
 
I have bootstrap modal that have scrolling. I want to load data from AJAX call when scroll hit bottom. I am using this jQuery code but its not working for this bootstrap modal.
$(window).scroll(function() {
 if($(window).scrollTop() == $(document).height() - $(window).height()) {
       // ajax call get data from server and append to the div
 }
});
Here is my model
<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> 
 

And my CSS is
/* 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
解决方案
You need to identify whether modal-body has reached bottom as you are scrolling modal-body so change window to modal-body as below:
$('.modal-body').scroll(function() {
  if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
       alert('reached bottom');
  }
});
Bootply here

                        
这篇关于向下滚动引导模型加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！