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

Posted 2023-02-22

【中文标题】如何检测 Bootstrap 模态滚动条的位置？

【英文标题】：How to detect position of the Bootstrap modal scrollbar?

【发布时间】：2017-03-22 23:48:20

【问题描述】：

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

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

但是，window.onscroll 函数似乎不起作用或无法识别模式内的滚动位置，即使我在第一个 ajax 请求之后在模式内定义了它。

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

【问题讨论】：

为什么对这个非常精确的问题投了反对票？

可能是因为 scrollTop 在 jQuery 中是众所周知的函数 :)

仍然不是我具体问题的正确答案。我需要知道如何检测模态框内的滚动行为，因为window.onscroll 不起作用。

【参考方案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');
     

);

如果对您有帮助，请点赞我的问题/答案。

【讨论】：

我有同样的问题，但你的代码不适合我

我已经编辑了我的帖子。经过测试并适用于 Google Chrome 和现代 android 设备。 100 表示 100 像素是阈值（在我的情况下激活无限滚动和加载更多内容选项）。

你能做一个jsfiddle吗？

【参考方案2】：

这应该可以解决问题

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

【参考方案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')