如何知道表滚动条是否到达jquery的末尾

时间：2017-05-14 14:23:41

标签： javascript jquery html css

看看这个小提琴 https://jsfiddle.net/wzwaj0k0/1/

我希望在滚动条到达结尾但不能

时触发警报

JS 

function GetScrollerEndPoint()
{
   var scrollHeight = $("#Mytable").prop('scrollHeight');
   var divHeight = $("#Mytable").height();
   var scrollerEndPoint = scrollHeight - divHeight;

   var divScrollerTop =  $("#Mytable").scrollTop();
   if(divScrollerTop === scrollerEndPoint)
   {
       alert("you reached the end");
   }
}

CSS 

table {
  display: block;
  height: 100px;
  overflow-y: auto;
}

table.GeneratedTable thead {
  background-color: #959595;
}

HTML 

<table id="Mytable" >
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

尝试了一切。但它应该只是那个表，因为我尝试使用window.scroll函数，但是我必须通过ajax向这个表添加行。所以当只有表滚动条到达结尾时需要转到该函数

2 个答案:

答案 0 :(得分：2)

jQuery有.scroll个事件可以添加到你的表中。

获取桌子的内部高度。

  var maxScrollHeight = $('#Mytable tbody').height() + $('#Mytable thead').height();

获取scrollTop高度+表高度（在CSS中设置为100px）

  var scrollFromTop = Math.ceil($('#Mytable').scrollTop()) + $('#Mytable').height();

使用Math.ceil()，因为Stackoverflow上的scrollTop（）返回的值略低于正常值。 （jsfiddle正常工作）https://jsfiddle.net/dalinhuang/5d219rmh/

＆＃13;
＆＃13; 
$(document).ready(function() {

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

    var maxScrollHeight = $('#Mytable tbody').height() + $('#Mytable thead').height();
    var scrollFromTop = Math.ceil($('#Mytable').scrollTop()) + $('#Mytable').height();

    if (scrollFromTop == maxScrollHeight) {
      alert("you reached the end");
    }
  });

});
＆＃13; 
table {
  display: block;
  height: 100px;
  overflow-y: auto;
}

table.GeneratedTable thead {
  background-color: #959595;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Mytable">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

问题是你永远不会打电话给 GetScrollerEndPoint 。一种选择是在表格中添加 onscroll 事件。

<table id="Mytable" onscroll="GetScrollerEndPoint()">
    ...
</table>

即使您向表中添加新行，这也应该有效。只有在滚动表格时才会调用 GetScrollerEndPoint 。

这里有一个例子。

＆＃13;
＆＃13; 
function GetScrollerEndPoint()
{
   var scrollHeight = $("#Mytable").prop('scrollHeight');
   var divHeight = $("#Mytable").height();
   var scrollerEndPoint = scrollHeight - divHeight;
   
   var divScrollerTop =  $("#Mytable").scrollTop();
   if(divScrollerTop === scrollerEndPoint)
   {
       alert("you reached the end");
   }
}
＆＃13; 
table {
  display: block;
  height: 100px;
  overflow-y: auto;
}

table.GeneratedTable thead {
  background-color: #959595;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="Mytable" onscroll="GetScrollerEndPoint()">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
     <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
     <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
     <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr> <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
     <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
     <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
     <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题