javascript - jquery 如何知道表格滚动条是否到达末尾

Question

看看这个 fiddle 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 将行添加到这个表。因此需要在只有表格滚动条到达末尾时才转到该函数

Answer 1

jQuery 有 .scroll 事件，您可以将其添加到表格中。

获取 table 的内部高度。

  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/

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