JQuery根据内容调整div大小答案

【问题标题】：JQuery resizing div based on contentJQuery根据内容调整div大小
【发布时间】：2011-02-16 12:00:47
【问题描述】：

我很好奇如果使用 Javascript 和 jQuery 库，我是否能够模拟 Facebook 或 Twitter 之类的东西，当滚动条到达某个点并且 div 的高度被扩展并显示更多数据时。我对 JQuery 库非常陌生，我注意到有一个“可调整大小”的功能。我知道使用 CSS 我可以使用overflow: auto;，但我只是想要看起来更好一点的东西。如果除了 javascript 还有其他选项，我很好奇哪种解决方案是最好的。

【问题讨论】：

标签： javascript jquery css jquery-ui

【解决方案1】：

您不需要为此使用无限滚动插件。使用 jQuery，你可以简单地做

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
      //Add something at the end of the page
   }
});

【讨论】：

【解决方案2】：

div 的大小不是通过 javascript 扩展的。当您到达页面底部时，新内容会自动加载并插入页面中，这就是它展开的原因。

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

【讨论】：

【解决方案3】：

Facebook 使用 AJAX 加载内容，因此不需要“扩展”。

如果你想“模拟”它，你可以使用 scrollTop() 函数：http://api.jquery.com/scrollTop/

例如

var topPos = $(window).scrollTop();
if (topPos < x) {
    // Do stuff i.e. "expand the div"
}

【讨论】：

【解决方案4】：

是的。如果你的意思是它通常被称为无限滚动：http://www.infinite-scroll.com/

这就是我用来模拟加载的东西。如果您使用的是 rails，则为您的分页添加 will_paginate gem 会有所帮助（infinitescroll 隐藏了它，但使用生成的链接来获取数据）

【讨论】：

【解决方案5】：

你说的效果叫做Infinite Scroll模式，被facebook、twitter等流行起来。你可以找到关于它的实现细节here和@ 987654322@。您也可以通过 Google 搜索 jquery infinite scrolling 以查找更多该模式的插件和实现。

【讨论】：

【解决方案6】：

您可能正在寻找：

无限卷轴 http://www.infinite-scroll.com/ jQuery 和 Wordpress 插件

jQuery 插件： http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/ 当前：版本 1.5.110106

WordPress 插件： http://www.infinite-scroll.com/installation/

https://github.com/paulirish/infinite-scroll

【讨论】：