如何知道表格滚动条是否在jquery中到达末尾答案

【问题标题】：How to know if a table scroll bar reached the end in jquery如何知道表格滚动条是否在jquery中到达末尾
【发布时间】：2017-05-15 10:35:40
【问题描述】：

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

我想在滚动条到达末尾但无法触发时触发警报

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 将行添加到这个表。所以需要在只有表格滚动条到达末尾时去函数

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

获取桌子的内部高度。

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

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

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

使用 Math.ceil()，因为 Stackoverflow 的 scrollTop() 返回的结果比正常情况要少一些。（jsfiddle 工作正常）https://jsfiddle.net/dalinhuang/5d219rmh/

$(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");
    }
  });

});

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

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

<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>

【讨论】：

【解决方案2】：

问题是您从不调用 GetScrollerEndPoint。一种选择是将 onscroll 事件添加到您的表中。

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

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

这里有一个例子。

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");
   }
}

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

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

<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>

【讨论】：