Question

我正在开发一个小项目，我需要在JQuery Scroll事件中提供帮助。我在使用以下代码滚动时编写了加载数据的代码

$(window).scroll(function(){
            if ($(window).scrollTop() > ($(document).height() - $(window).height())*.75){
                $('#loadingimage').css({"bottom":"10px", "right":"10px"}).fadeIn('fast');
                $.ajax
                ({
                    type: "POST",
                    url: "../../scroll_load.php",
                    data: "letter="+letter+"&start="+start,
                    success: function(msg)
                    {

                        $('#new_music_videos .appendvideos').append(msg).children(':last').hide().fadeIn('slow');
                        $('#loadingimage').fadeOut('fast');
                    }
                });

            }
            });

但滚动条仅在屏幕底部移动时加载数据。如何滚动到屏幕的3/4。

非常感谢。

Answer 1

有关更新的问题：

var loading = false; //stores if we're loading, to prevent "over-loading", I'm hilarious
$(window).scroll(function(){
  //if we're loading, or the scroll wasn't 3/4 of the way down, ignore the event
  if (loading || $(window).scrollTop() < ($(document).height() - $(window).height())*.75) return;

  loading = true; //loading! prevent scroll from loading until we're finished
  $('#loadingimage').css({"bottom":"10px", "right":"10px"}).fadeIn('fast');
  $.ajax({
      type: "POST",
      url: "../../scroll_load.php",
      data: "letter="+letter+"&start="+start,
      success: function(msg) {
          loading = false; //done loading, a scroll can load more again
          $('#new_music_videos .appendvideos').append(msg).children(':last').hide().fadeIn('slow');
          $('#loadingimage').fadeOut('fast');
      }
  });
});

上一个问题：
您可以检查它是否超过3/4，而不是等于总数，如下所示：

$(window).scroll(function() {
   if ($(window).scrollTop() > ($(document).height() - $(window).height())*.75) {
     //rest of code

请注意，特别是在较长的页面上，它在到达底部之前现在会多次true，因此您可能希望设置loading布尔标志以防止加载新的一次多次内容。

在JQuery滚动功能方面需要帮助

1 个答案: