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

问题描述

我想要一个事件在用户滚动并到达几乎页面底部时加载更多内容，比如离底部大约 100 像素，问题是每次滚动到较低的 100 像素时都会触发事件页面，所以这是一个不可能发生的明显问题，出于显而易见的原因，所以我想知道我如何才能做到最好，我已经在这里查看了其他答案/问题，但是一个部分有效的解决方案不适合什么我需要它来做，当我尝试更改它时，它每次都会完全冻结我的浏览器.这是问题:检查用户是否已经滚动到底部

我正在查看的答案接近底部，但这是他建议的代码:

$(window).scroll(function() {if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {$(window).unbind('scroll');警报(接近底部！")；}});

现在就像我说的那样，这确实有效并且可以防止触发多个事件，问题是我需要触发无数个事件，比如说我在到达底部时加载 100 行信息，但是有还有 1500 多个，我需要每次都重复加载所有信息量(每次到达页面底部 100px 部分时)

所以我尝试做的是:

 函数 loadMore(){alert("加载更多");$(window).bind('scroll');}$(窗口).滚动(功能(){if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {$(window).unbind('scroll');装载更多();}});

就像我说的，这每次都会立即冻结我的浏览器，绑定部分.

解决方案

我也遇到了同样的问题.我遇到了这个链接，它真的很有帮助(并且有效)！

更新:我查看了代码，我认为当您重新绑定时，您缺少要重新绑定到的功能.

jsFiddle

 函数 loadMore(){console.log("加载更多");$("body").append("
");$(window).bind('scroll', bindScroll);}函数绑定滚动(){if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {$(window).unbind('scroll');装载更多();}}$(window).scroll(bindScroll);

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!");
   }
});

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)

so what I have tried to do is:

 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);

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