我正在使用 JQuery 和 Bootstrap,并且正在使用 ajax 请求加载模式,因此内容将在模式内部动态加载。
我设法通过单击按钮(也在模式内)加载更多内容,但我想实现 infinite scroll功能。
然而,window.onscroll
函数似乎不起作用,也无法识别模态中的滚动位置,即使我在第一个 ajax 请求后在模态中定义了它。
问题:如何检测模式内的特定元素是否对用户可见,以自动加载更多内容?
最佳答案
其实我自己找到了正确的答案:
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');
}
});
关于javascript - 如何检测Bootstrap模式滚动条的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40502371/