jQuery：只顯示當前視圖中可見的內容，並在滾動時加載剩餘的內容

我在<ul>菜單內有一組很長的<li>元素，需要用戶長時間向下滾動以到達底部頁。我如何使用jQuery僅從當前視圖（取決於他的分辨率）加載屏幕上可見的內容，並且僅在用戶向下滾動時加載列表的其餘部分？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>

來源

2014-01-29 orschiro

你要支付這個代碼？首先向我們展示您的試驗！ –

@Ashraf：我的目的不是獲得工作代碼，而是找到一個工具包的方向。 – orschiro

下面的鏈接可能會幫助您。

jquery-endless-scroll

和

jQuery Plugins

來源

2014-01-30 06:18:30

我會將此標記爲最佳。謝謝！它包含了非常有用的信息。實際上，jquery-endless-scroll已經是我想要的東西了。 – orschiro

嘿，我真的很高興它幫助你.. :) –

給一個嘗試stroll.js，如果你也想添加一些效果（它不需要jQuery的）：

<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%; 
}

來源

2014-01-29 13:39:37

你不能，除非你改變你的設計。就好像您只顯示可見的內容一樣，滾動條不會出現，滾動也不可能。你想實現無限滾動，而不是點擊「顯示更多」或其他東西。如果您想要在滾動中顯示更多內容，則必須顯示比可見更多的內容。

來源

2014-01-29 13:43:36 Sam

jQuery：只顯示當前視圖中可見的內容，並在滾動時加載剩餘的內容

回答

相關問題