当滚动到页面的底部100px时，jQuery加载内容，多个事件被触发 [英] jQuery load content when scroll to bottom-100px of page, multiple events fired

问题描述

我希望一个事件在用户滚动时加载更多内容并且几乎到达页面的底部，比如从底部开始大约100px，问题是每次滚动时事件都会被触发页面，所以这是一个明显的问题，不可能发生，原因很明显，所以我想知道我怎么能做到最好，我已经在这里检查了其他答案/问题，但是一个部分工作的解决方案不符合什么我需要它做，当我尝试改变它，它会，它每次完全冻结我的浏览器。
这是一个问题：
检查如果用户已滚动至底部

I want an event to load more content when a user is scrolling and reaches nearly the bottom of the page, say about 100px from the bottom, the problem is that the events get fired every single time you scroll in that lower 100px of the page, so that's an obvious issue that cannot happen, for obvious reasons, so I am wondering how I can do this best, I have checked out other answers/questions on here, however the one solution that partially works doesn't fit what I need it to do, and when i try to change it so it will, it completely freezes my browser every time. this is the question: Check if a user has scrolled to the bottom

我看答案是接近底部，但这里是他建议的代码：

The answer I'm looking at is near the bottom, but here is the code he suggests:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

就像我说的那样，这确实有效并防止多个事件被触发，问题是我需要有无数的事件被触发，比如我到达底部时加载了100行信息​​，但仍然有1500多个，我需要它每次重复加载每一个信息量（一旦你达到底部100px每次页面的一部分）

now like I said, this does work and prevents more than one event being fired, the problem is I need to have a endless amount of events fired, say i load 100 rows of information when you reach the bottom, but there are still 1500 more, i need it to repeat each time to load every amount of information (once you reach the bottom 100px part of the page each time)

所以我试图做的是：

 function loadMore()
{
   alert("More loaded");
   $(window).bind('scroll');
 }

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
});

就像我说的，这冻结了我的每一次浏览器立即，结合部分。

like I said, this freezes up my browser immediately every time, the binding part.

推荐答案

我也有同样的问题。我遇到了这个链接，它真的有帮助（并且有效）！

I was having this same problem too. I came across this link and it really helped (and worked)!

更新：我查看了代码，我认为当你重新绑定时，你错过了重新绑定的功能。

Update: I looked at the code and I think that when you rebind, you are missing the function to rebind to.

jsFiddle

 function loadMore()
{
   console.log("More loaded");
    $("body").append("<div>");
   $(window).bind('scroll', bindScroll);
 }

 function bindScroll(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
}

$(window).scroll(bindScroll);

这篇关于当滚动到页面的底部100px时，jQuery加载内容，多个事件被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！