javascript - 如何检测Bootstrap模式滚动条的位置？

Question

我正在使用 JQuery 和 Bootstrap，并且正在使用 ajax 请求加载模式，因此内容将在模式内部动态加载。

我设法通过单击按钮(也在模式内)加载更多内容，但我想实现 infinite scroll功能。

然而，window.onscroll 函数似乎不起作用，也无法识别模态中的滚动位置，即使我在第一个 ajax 请求后在模态中定义了它。

问题:如何检测模式内的特定元素是否对用户可见，以自动加载更多内容？

Answer 1

其实我自己找到了正确的答案:

var modal_scrollTop = $('.modal-body').scrollTop();
var modal_scrollHeight = $('.modal-body').prop('scrollHeight');
var modal_innerHeight = $('.modal-body').innerHeight();

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

    // Write to console log to debug:
    console.warn('modal_scrollTop: ' + modal_scrollTop);
    console.warn('modal_innerHeight: ' + modal_innerHeight);
    console.warn('modal_scrollHeight: ' + modal_scrollHeight);

    // Bottom reached:
    if (modal_scrollTop + modal_innerHeight >= (modal_scrollHeight - 100)) {
        alert('reached bottom');
    } 

});