javascript - 如何在滚动列表中选择可见元素

Question

我需要在滚动列表中选择当前可见(和可见)的元素。在我的列表中，我有一个 table。示例:

<div class='list'>
<table>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>        
</table>

我只想选择那些现在对用户可见的元素(即在屏幕上，而不是在屏幕外)

在 JsFiddle 上:jsfiddle

Answer 1

调整了我的另一个 answer

Demo

查看代码中的内联注释。

$(document).ready(function() {
  // Get viewport height, gridTop and gridBottom
  var gridTop = 0,
    gridBottom = $('.list').outerHeight();

  $('.list').on('scroll', function() {
    // On each scroll check if `td` is in interested viewport
    $('.list td').each(function() {
      var thisTop = $(this).offset().top;

      // Check if this element is in the interested viewport
      if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
        $(this).css('background', 'red');
      } else {
        $(this).css('background', 'gray');
      }
    });
  });
});

.list {
  height: 112px;
  width: 300px;
  display: block;
  overflow-y: scroll;
}
table tr td {
  width: 300px;
  height: 50px;
  background-color: gray;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class='list'>
  <table>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
  </table>
</div>