【问题标题】:how to know i reached bottom of table如何知道我到达了桌子的底部
【发布时间】:2013-10-21 14:39:28
【问题描述】:

我有一张桌子,我通过溢出使它可以滚动:auto; 现在我想知道垂直滚动条是否到达底部,以便我可以显示在页面加载时隐藏的下 5 行。 无论我在哪里搜索互联网,它都会使用 window.height() .... 但我不需要使用 window,因为我的元素仅限于 iframe 中的表格。

这是表结构

 <div class="responsive" style="height:150px; overflow:hidden;" >
   <table class="responsive table table-bordered dataTable" id="checkAllEmail"  >
     <thead>
       <tr style="display:block;">
         <th class="serial" style="width:57px;">#</th>
         <th style="width:156px;">Display Name</th>
         <th class="tableButton" style=" text-align:center!important; width:147px;">Actions</th>
       </tr>
     </thead>
     <tbody id="mailServerTbody" style="height:113px; overflow:auto; display:block;">
     </tbody>
   </table>
 </div>

这是我想要在 js 中做的事情

$(document).ready(function(){

var div=0;
 $('#mailServerTbody').scroll(function(){
        var temp = $(this).scrollTop();
        console.log($("#mailServerTbody").position().top+"blah")
        console.log(temp)
        if((temp%32==0)||(temp%32==17)){
            console.log("enter")
            div = div+4;
            //div = div*5-1;
            console.log(temp/32+"temp")
            $('#mailServerTbody tr:gt('+div+'):lt(5)').show();
        }
    });
});

【问题讨论】:

  • $("#mailServerTbody")[0].scrollHeight
  • 试试 $("#mailServerTbody table:last") 或在stackoverflow.com/questions/9979418/…找到更多信息
  • @WillemD'haeseleer document.querySelector('#mailServerTbody').scrollHeight
  • @hitautodestruct,如果 jQuery 可用,你为什么要使用它?
  • @WillemD'haeseleer - 因为原生 js 总是更快。

标签: javascript jquery


【解决方案1】:

试试这个

<script type="text/javascript">
   $(document).ready(function(){
   var tbody = $('#mailServerTbody');
   var heightOfTbody = 0;
   $("#mailServerTbody tr").each(function(){
    heightOfTbody = heightOfTbody + $(this).height();
   });

   $('#mailServerTbody').scroll(function(){

   if(heightOfTbody == ($(this).scrollTop() + $('#mailServerTbody').height() ))
        {
       alert("reached last")
        }
   });
 });
</script>

【讨论】:

  • 您遵循相同的结构,对 $("#mailServerTbody tr") 即在 tbody tr 内部是否存在?我创建了一个 js fiddle 请参考jsfiddle.net/Shinov/229wE
  • 实际上我的 tr 是在运行时生成的。最初我的 tbody 是空的。这可能是问题?
  • 你将如何加载trs。如果是ajax,在成功函数中使用上面的
  • 谢谢它的工作...我想再问一个建议..在显示下 5 行时显示加载图像的正确方法是什么以及如何延迟显示以便创建效果就像花一些时间加载然后接下来的 5 行显示 +1 为您的 ans ;)
猜你喜欢
  • 2013-06-11
  • 2013-12-15
  • 1970-01-01
  • 2020-09-15
  • 2017-06-26
  • 1970-01-01
  • 1970-01-01
  • 2013-06-18
  • 2019-06-21
相关资源
最近更新 更多