当滚动条击到div时，我试图触发滚动条上的按钮单击。下面是我尝试的代码，但是当滚动条单击div时，它会触发多次单击并加载下一组多数据。谁能建议我如何仅触发一次点击。
非常感谢您的帮助：）
$(window).scroll(function() {
var divTop = $('.hit-scroll').offset().top,divHeight = $('.hit-scroll').outerHeight(),wHeight = $(window).height(),windowScrTp = $(this).scrollTop();
if (windowScrTp > (divTop+divHeight-wHeight)){
$('body').find('.show-more button').trigger('click');
}
});
注意：在按钮上单击将进行ajax调用，该调用将加载下一组数据。
问题是，每次向下滚动1像素，您就运行$(window).scroll
因此，假设windowScrTp > (divTop+divHeight-wHeight)等于200 > (168)，这意味着您的点击功能将被触发两次。
我强烈建议您创建一个变量load，如下例所示，该变量应避免多次加载。
var load = true;
$(window).scroll(function() {
var divTop = $('.hit-scroll').offset().top,divHeight = $('.hit-scroll').outerHeight(),wHeight = $(window).height(),windowScrTp = $(this).scrollTop();
if (windowScrTp > (divTop+divHeight-wHeight)){
if(load){
load = false;
$('body').find('.show-more button').trigger('click');
}
}
});
在您的ajax成功调用中，我将添加load = true;
我创建了一个演示，演示下面的想法。
演示
var load = true;
$(window).scroll(function() {
var windowScrTp = $(this).scrollTop();
if (windowScrTp > (200)) {
if (load) {
console.log("load start")
load = false;
$('body').find('.show-more button').trigger('click');
}
}
});
$('.show-more button').click(function() {
setTimeout(
function() {
console.log("load stop")
load = true;
},2000);
});body {
height: 2000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-more"><button>more</button></div>,
我发现此解决方案更加精确且效果很好。
function bindScroll(){
var divTop = $('.hit-scroll').offset().top,windowScrTp = $(this).scrollTop();
if (windowScrTp > (divTop+divHeight-wHeight)){
$(window).unbind('scroll');
$('body').find('.show-more button').trigger('click');
}
}
$（window）.scroll（bindScroll）;