javascript - 如何在滚动后使用 jquery 检测精确的偏移量 top()？

Question

我有一个表，我想检测TR点击位置的偏移顶部，这工作正常，但滚动页面后，这不能正常工作。为什么滚动 offset().top 改变后？如何解决？

$(function() {
  $('tr').click(function() {
    offsetTop = $(this).offset().top;
    console.log(offsetTop);
  });
});

.myDiv {
  overflow-y: auto;
  height: 250px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="myDiv">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 1</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 2</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 3</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 4</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 5</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 6</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 7</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 8</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 9</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July 10</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

您总是可以计算偏移量，并考虑滚动位置：

var offset_t = $(selector).offset().top - $(window).scrollTop();
var offset_l = $(selector).offset().left - $(window).scrollLeft();