检查用户是否接近滚动到元素底部

Question

我的网站有一个引导模式。我的最终目标是为模态添加无限滚动，这样当用户向下滚动到模态底部时，它会从服务器加载更多数据并将数据附加到模态。

到目前为止，这是我的代码。我现在所拥有的只是模式上的滚动事件：

http://jsfiddle.net/DTcHh/33247/

注意：我的网站上模态框的高度可能会有所不同。有时可能只是 1 段文字。

我的问题是，如何检查用户是否接近滚动到模式的底部？

用更专业的术语来说，如何检查窗口底部是否与模态底部位于同一位置？

---

更新

我发现这个解决方案有效，但是，它似乎有点复杂/冗长。有什么办法缩短吗？

http://jsfiddle.net/DTcHh/33271/

---

HTML：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS：

$("#exampleModalLong").on("scroll", function() {
    console.log("scroll");
});

Answer 1

这个答案更像是J.M. Echevarría's Answer 的节流版本（假设滚动代码是正确的）。有时会出现一些问题，即您可能会因事件而使浏览器不堪重负（加载超出预期的内容和/或减慢浏览器的速度，这会给用户带来负面的网站体验）。

$(document).scroll(function (){
  var timerId;
  if($(this).height() - $(this).scrollTop() - $(window).height() < 20){
    clearTimeout(timerId);
    timerId = setTimeout(function(){
      console.log('time to show new content');
      }, 250);
  }
});

Answer 2

您可以考虑使用https://developer.mozilla.org/en/docs/Web/API/Element/scrollHeight 来检查当前滚动位置

例子：

$("#exampleModalLong").on("scroll", function() {
var isEnd = this.scrollHeight - this.scrollTop === this.clientHeight;
if (isEnd) {
   alert('Bingo');
}
});

Answer 3

$(document).ready(function(){
    $('#exampleModalLong').on("scroll", function() {
    if(($('#exampleModalLong').hasClass('in') && !$('body').hasClass('scrl'))&&($(window).scrollTop() + $(window).height() > $('.modal-footer > button').offset().top)){
      $('body').addClass('scrl');
      setTimeout(function(){
        alert('foo');
        $('body').removeClass('scrl');
      }, 900);
    }

  });
});

See

Answer 4

要检查您是否已到达引导模式的底部，您可以使用以下代码 sn-p ：

$('.modal').scroll(function() {
    if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
        alert('You have reached the bottom of the modal')
    } 
});

希望对你有帮助！！！

Answer 5

我不是 JavaScript 方面的专家，就我个人而言，当我必须处理滚动事件时，每次我需要记住文档、窗口和视口之间的区别时，我都必须返回文档，但我认为这会让你继续跟踪。

注意：这将适用于整个文档的滚动事件，尝试将其应用到模态框的正文标签并告诉我：

//in this test case your limit is going to be 20
$(document).scroll(function (){
    if($(this).height() - $(this).scrollTop() - $(window).height() < 20){
        console.log('time to show new content');
    }
});

希望对你有帮助

编辑

$('.modal-content').scroll(function (){
    if($(this).height() - $(this).scrollTop() - $('.modal-dialog').height() < 20){
        console.log('time to show new content');
    }
});

如果你想要的只是让.modal-content 在.modal-dialog 内滚动并且每次.modal-content 的内容 即将用完，追加更多，那么我认为这就是你需要。

现在，如果您希望 整个（我真的必须强调）模式在背景静止时滚动，请告诉我您是如何实现的它没有将其封装在任何其他东西中。

祝你好运，让我知道

ps：如果这行得通，你真的应该看看Erik Philips' 的答案。