javascript – jQuery加载内容时,滚动到底部的100px的页面,多个事件触发

前端之家收集整理的这篇文章主要介绍了javascript – jQuery加载内容时,滚动到底部的100px的页面,多个事件触发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要一个事件来加载更多的内容,当用户滚动并达到几乎底部页面,说从底部大约100px,问题是事件被触发每一次滚​​动到低100页的页面,所以这是一个明显的问题,由于显而易见的原因,所以我想知道如何最好地做到这一点,我已经在这里检查了其他答案/问题,但是部分工作的一个解决方案并不适合我需要的做,当我尝试改变它,所以它会完全冻结我的浏览器每次.
这是问题:
Check if a user has scrolled to the bottom

我正在看的答案接近底部,但这里是他建议的代码

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

现在就像我说的那样,这样做有效,并且可以防止多个事件被触发,问题是我需要发生无数次的事件,比如当你到达底部时,我加载了100行信息​​,但还有1500个,我需要它每次重复加载每一个信息量(一旦你达到每页底部100px的一部分)

所以我试图做的是:

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

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

就像我说的那样,这样就立即冻结我的浏览器,每次都是绑定部分.

解决方法

@H_301_19@ 我也有同样的问题.我遇到这个 link,真的帮助(并且工作)!

更新:我看了代码,我认为当你重新绑定,你错过了重新绑定的功能.

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相关文章