Question

我有一个滚动功能

$('#lisr').scroll( function() {
    if($(this).scrollTop() +  $(this).innerHeight()>= $(this)[0].scrollHeight)
    {
        //DO some code
    }
}

问题是当我向下滚动并且它击中底部时它执行代码两次而不是一次，所以如果我在其中进行任何ajax调用，它会被制作两次，我在其中缺少什么？

Answer 1

scroll()函数绑定到滚动事件 - 当用户滚动页面时会多次触发。

编写代码时假设可以多次调用它：

var completed = false;

function doSomeCode() {}
function isAtBottomOfPage() {}

$('#lisr').scroll(function () {
  if (!completed && isAtBottomOfPage()) {
    doSomeCode();
    completed = true;
  } 
});

jsfiddle：http://jsfiddle.net/kZJ9k/1/

作为一个更高级的注释，您可能不应该将您的逻辑直接绑定到scroll事件;滚动时，您可能会遇到导致用户滞后的风险。阅读John Resig的更多相关信息：

http://ejohn.org/blog/learning-from-twitter/

Answer 2

以下是我无休止滚动的代码。我所做的是解除滚动事件的绑定，直到ajax请求完成。您还可以使用变量作为标志，并在调用ajax请求之前检查/更改其值。希望它有所帮助：

$(document).ready(function(){
    $(window).bind('scroll', loadPage);
});


var loadPage = function(){
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        $(window).unbind('scroll');
        $.ajax({
           //Your things here
           success: function(result){
              // Do success here
              $(window).bind('scroll', loadPage);
           },
           error : function(xhr){ //Do error here }
        });
    }
}

Answer 3

$('#lisr').scroll( function() {
    if($(this).scrollTop() +  $(this).innerHeight() > $(this)[0].scrollHeight)
    {
        //DO some code
    }
}

滚动不能在javascript中工作

3 个答案: