如何检测滚动条何时到达模态底部

Question

我有一个模式，我计划在滚动条到达底部时动态放置内容。我一直在做很多研究，但似乎无法找到如何检测模态滚动条何时到达底部。应该发生的是将弹出警报，说明已到达底部。

下面是我的代码片段：

$(".modal-body").scroll(function(){

    if($('#prev').height() == ($(this).scrollTop() + $(this).height())){
        alert("reached bottom!!")
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body"style="height: 400px; overflow:auto;">
              <pre id="prev"style="display: inline-block; height: 900px"> </pre>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
      </div>

如您所见，我似乎无法让它检测到滚动条触底，我已经用了大约一个小时了。任何帮助将不胜感激！！

Answer 1

将 position: absolute 设置为子项，然后使用 getBoundingClientRect 计算父项和子项的大小，如下所示：

$(".modal-body").scroll(function() {

  const modal = $(this)[0].getBoundingClientRect();
  const prev = $('#prev')[0].getBoundingClientRect();
  const modalTop = parseInt(getComputedStyle($(this)[0])['padding-top']);
  
  if (prev.top - modal.top === modalTop)
      alert("reached top!!")
  if ((modal.bottom | 0) === (prev.bottom | 0))
      alert("reached bottom!!")
});

#prev {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body"style="height: 400px; overflow:auto;">
              <pre id="prev" style="display: inline-block; height: 900px"> </pre>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
      </div>

如何检测滚动条何时到达模态底部

How to detect when scrollbar hits bottom of modal

html

javascript

css

jquery

scrollbar