Question

我在<li>菜单中有一长串<ul>元素，要求用户向下滚动很长时间才能到达页面底部。如何使用jQuery仅从当前视图加载屏幕上可见的内容（取决于他的分辨率），并仅在用户向下滚动时加载列表的其余部分？

再次，让我们假设这个非常简单的布局：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div class="container">
           <ul class="posts">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              ...
           </ul>
        </div>
    </body>
</html>

Answer 1

如果你还想添加一些效果（它不需要jQuery），试试stroll.js：

<ul id="posts-list">
  ...
</ul>

stroll.bind(document.getElementById('posts-list'));

基础CSS：

html,
body,
.container {
  height: 100%;
}

#posts-list {
  position: relative;
  width: 100%;
  min-height: 100%;
}

Answer 2

以下链接可能会对您有所帮助。

jquery-endless-scroll

和

jQuery Plugins

Answer 3

除非你改变你的设计，否则你不能。好像你只显示可见的内容，滚动条将不在那里，滚动不可能。您想要实现无限滚动，在其中单击“显示更多”或其他内容。如果要在滚动时显示更多内容，则必须显示超出可见范围的内容。

jQuery：仅显示从当前视图中可见的内容，并在滚动时加载其余内容

3 个答案: