向下滚动时扩展网站？答案

【问题标题】：Extending a site when scrolling down?向下滚动时扩展网站？
【发布时间】：2013-10-20 12:11:58
【问题描述】：

有人对如何自动扩展网站有建议吗？

例如网站“9gag.com”也称为 9fag。它将一部分加载到浏览器中，但是当您滚动时，该站点会自行扩展，而无需单击“下一个站点”。

我想在我创建的商店中使用它。

例如这里：

http://saasil.de/wohnraumleuchten/deckenleuchten/

向下滚动时，您会看到可以选择转到第二个站点...

如果有人能指出我在这里使用的正确技术，那就太好了。

【问题讨论】：

当用户滚动到某个点或接近底部时，只需将新内容附加到页面。你可以用 jQuery 做到这一点。
内容是自动生成的。这就是为什么我正在寻找有关其背后技术的教程。
@bjankamuhametaj：我认为它被称为无限滚动。

标签： javascript jquery ajax css

【解决方案1】：

正如上面在 cmets 中提到的那样，您正在寻找无限滚动。有很多 jQuery 插件可以帮助你达到想要的效果。当然，如果您正在动态加载内容，您可以使用 AJAX 获取数据。

Twitter、Pinterest 等使用了类似的技术，当然还有 9gag。你可以在http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin看到解释和工作演示

【讨论】：

【解决方案2】：

查看关于 SO 的this 问题。在此示例中，页面将在到达页面底部之前扩展 100 像素

function loadMore()
{
    console.log("More loaded");
    // load your content (e.g. via ajax)
    $("body").append("<div>");
    $(window).bind('scroll', bindScroll);
}

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

$(window).scroll(bindScroll);

感谢 JoeFletch！

【讨论】：