我想检测用户是否滚动到窗口的末尾,然后单击“显示更多”按钮(例如Facebook新闻源),以触发触发器。
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){
$('.feed-show-more-button').trigger('click');
}
});
这是我的代码,但是只有当我滚动到窗口的末尾然后回到顶部时,它才起作用
任何人都可以帮忙吗?
答案 0 :(得分:1)
尝试
var CheckIfScrollBottom = debouncer(function() {
if (getDocHeight() == getScrollXY()[1] + window.innerHeight) {
$('.feed-show-more-button').trigger('click');
}
}, 500);
document.addEventListener('scroll', CheckIfScrollBottom);
function debouncer(a, b, c) {
var d;
return function() {
var e = this,
f = arguments,
g = function() {
d = null, c || a.apply(e, f)
},
h = c && !d;
clearTimeout(d), d = setTimeout(g, b), h && a.apply(e, f)
}
}
function getScrollXY() {
var a = 0,
b = 0;
return "number" == typeof window.pageYOffset ? (b = window.pageYOffset, a = window.pageXOffset) : document.body && (document.body.scrollLeft || document.body.scrollTop) ? (b = document.body.scrollTop, a = document.body.scrollLeft) : document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop) && (b = document.documentElement.scrollTop, a = document.documentElement.scrollLeft), [a, b]
}
function getDocHeight() {
var a = document;
return Math.max(a.body.scrollHeight, a.documentElement.scrollHeight, a.body.offsetHeight, a.documentElement.offsetHeight, a.body.clientHeight, a.documentElement.clientHeight)
}
答案 1 :(得分:1)
添加了jsfiddle http://jsfiddle.net/3unv01or/
var processing;
$(document).ready(function(){
$(document).scroll(function(e){
if (processing)
return false;
if ($(window).scrollTop() >= ($(document).height() - $(window).height())){
console.log('in it');
processing = true;
$('#container').append('More Content Added');
console.log($('#container'));
processing = false;
});
}
});
});
.loadedcontent {min-height: 800px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">Hello world<div class="loadedcontent"></div></div>