Question

以下代码检查页面是否有滚动条。如果没有，那么它会找到前三个div，其中包含“result”和“hidden”类，并删除“隐藏”类：

$(window).load(function() {

    if ($(window).height() >= $(document).height()) { 
        $(".result.hidden").slice(0, 3).removeClass('hidden');
    }

});

这工作正常但是我需要代码继续检查是否没有滚动条，如果没有从“结果”类中删除接下来的3个元素中的“隐藏”类。当没有更多类的元素，或者已经显示滚动条现在在浏览器中时，应该停止。

我试过使用while和do命令但是这显示了所有的div。我认为这是因为while条件只检查一次，而不是在显示更多元素之后。我怎样才能每次都重新检查一次？

$(window).load(function() {

    do {
        $(".result.hidden").slice(0, 3).removeClass('hidden').find('img').each(showImg);
    }
    while ($(window).height() >= $(document).height()) { 
    }

});

Answer 1

使用while，您可能陷入无限循环。 while循环永远执行，只要条件为真，并且计算机可以处理它。换句话说，它会冻结您的代码和浏览器，直到条件为假并且循环中断。

使用while每隔50或100毫秒检查一下您的情况，而不是连续的setInterval指令：

setInterval( function(){
    if ($(window).height() >= $(document).height()) { 
        $(".result.hidden").slice(0, 3).removeClass('hidden');
    }
}, 100);

Answer 2

你可能只是想听一下窗口调整大小事件，我会做这样的事情......

    function checkForScrollBars () {
      if ($(window).height() >= $(document).height()) { 
          $(".result.hidden").slice(0, 3).removeClass('hidden');
      }
    }

    $(window).load(function() {
        checkForScrollBars();
    });

    $(window).on('resize', function(e) {
        checkForScrollBars();
    });

如果页面有滚动条并且每次都有重新运行功能，请继续检查？

2 个答案: