Question

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

我设法通过点击按钮（也在模态内）加载更多内容，但我想实现infinite scroll功能。

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

问题：如何检测用户是否可以看到模式中的特定元素是否可以自动加载更多内容？

Answer 1

这应该可以解决问题

const $modal = $("#myModal")
const $bookList = $modal.find('.media-list')

$modal.scroll(e => {
  const $middleBook = $bookList.find('.media').eq(BOOKS_CHUNK_SIZE / 2)
  const middleBookInViewport = $(window).height() > $middleBook.offset().top;

  if(bookChunks.length && middleBookInViewport){
    $bookList.append(bookChunks.shift().map(bookTemplate))
  }
})

jsFiddle

Answer 2

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

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');
    } 

});

如果对你有帮助，请将我的问题/答案投票。

Answer 3

这适用于 Bootstrap 4.7，它将触发一个控制台日志命令，距离模态体底部的底部 100px。

$('.modal-body').bind('scroll', chk_scroll);

function chk_scroll(e) {
    var elem = $(e.currentTarget), offsetHeight = 100;

    if (elem[0].scrollHeight - elem.scrollTop() - elem.outerHeight() <= offsetHeight) {
        console.log('Near the bottom')
    }
}

如何检测Bootstrap模态滚动条的位置？

3 个答案: