懒惰滚动jquery

Question

所以我正在尝试使用 jQuery 实现延迟滚动，方法是在需要时从服务器获取项目。所以这就是我的做法。

• 检测到页面的结尾，调用服务器来获取更多的 N 项。
• 然后清除 div 加载项并将 scrollTop 设置为 div 顶部。
• 当用户想要返回阅读之前的列表时，再次调用服务器以取回项目。

这是简要代码。

if ((scrollHeight - scrollPosition) / scrollHeight === 0)
    {
        //end of the page,scrolling down retrieve N more listings
        doRequest("down");

    }

    if(jQuery(window).scrollTop() == 0)
    {
       //top of the page,scrolling up
        doRequest("up");
    }
    });

function doRequest(scroll_dir)
{

    if(scroll_dir == "down")
    {
        if(jQuery("#detail").length)
            listing_id = jQuery("#detail input").last().val();
    }
    else if(scroll_dir == "up")
    {
        if(jQuery("#detail").length)
            listing_id = jQuery("#detail input").first().val();

    }
    jQuery.ajax({

    type: "GET",
    url: url,
    data: {params:params,start:listing_id,scroll_direction:scroll_dir}, 
           success: function(results)
           {

            if(results.length > 0)
            {
             jQuery('#detail').html("");
            }

           //load the results 
           //append to div,jQuery('#detail').append(data);
          //code skipped for brevity

        scrollTop = jQuery("#detail").offset().top;

        jQuery(window).scrollTop(scrollTop);

        } ,

         });
}

所以我有一个后端控制器，它采用滚动方向的列表 id 并返回结果。

所以向下滚动发生得很好，但是当我向上滚动时，需要检测该点以进行服务器调用以检索 N-1 到 N-10 个列表。但是我发现我需要的那个点很难以jQuery(window).scrollTop() == 0 拨打电话不适用于手机？

任何已经这样做的图书馆？任何帮助都会有所帮助。谢谢。

Answer 1

您的延迟加载逻辑存在重大缺陷。

您的方法存在问题：

1. 您的第 1 步很好，但第 2 步和第 3 步存在重大问题。

2. 从第 2 步开始，清除当前视图或 div 上的现有项目并加载新项目是个坏主意，因为您可能需要像您的情况一样在向上滚动时再次加载它们。

更好的解决方案：

• 将新项目附加或扩展至屏幕上已加载的现有项目列表，这样您就不会再次加载相同的项目 向上滚动

• 它还可以提高您的网站性能，因为您 仅加载项目一次，而与页面的次数无关 由用户上下滚动。

注意：没有用于延迟加载功能的 javascript/jquery 插件具有更多功能，可以解决您所有的性能问题。“尽量不要重新发明轮子”