当Div Scroll事件触发时,获取顶部可查看表格行的ID

时间:2014-10-09 19:22:21

标签: jquery ajax asp.net-mvc-3

我在可滚动的div标签内有一个表。当用户向下滚动时,我想使用jQuery捕获可见TR的ID。可能会返回几百条记录。如何使用jQuery找到顶部可见的表行id?

<div id="mainDiv" style="overflow-y: scroll" class="scrollDiv">
   <table id="mainTable" style="table-layout:fixed" height="900px">
      <tr id="0">
          <td></td>
          <td></td>
      </tr>
      <tr id="1">
          <td></td>
          <td></td>
      </tr>
      <tr id="2">
          <td></td>
          <td></td>
      </tr>

   </table>
</div>

的jQuery

$(".scrollDiv").scroll(function(){
   var rowNumber = $(this).closest('tr').children('td:first').text();
   //the above returns the top row visible or not. I want the first visible row.
});

1 个答案:

答案 0 :(得分:4)

如果引用封闭的$(this).closest('tr')...的最近祖先({1}},则<div>以后,您发布的代码根本不起作用。您需要获取.scrollTop()的{​​{1}}并将其与div中元素的高度进行比较。

我创建了一个显示它如何工作的simple fiddle here(在这种情况下,滚动容器包含div - 您需要适应表行和要返回的单元格文本

HTML

div

脚本

<div id="mainDiv">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  ...
</div>
<div id="message"></div>